Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 17 additions & 12 deletions docs/integrations/frameworks/astro.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ outline: deep

Use Void with [Astro](https://astro.build/) for resource detection, typed database queries, and migrations. Astro keeps its own build and Cloudflare integration; Void plugs into its Vite configuration.

::: warning Astro 6 required
::: warning Astro 7 required

- [Astro 6+](https://astro.build/blog/astro-6/) is required to use `import { x } from "void/x"` helpers in Astro apps.
- [Astro 7+](https://astro.build/blog/astro-7/) is required because Void needs Vite 8.
- You also need to enable `"nodejs_als"` under `compatibility_flags` in your Cloudflare config.
:::

Expand Down Expand Up @@ -67,16 +67,15 @@ void deploy

## Using Void Features

Most [Void platform features](../../guide/app-types.md#void-apps) work with Astro in both local dev and production when using Astro 6+ with `nodejs_als`.
Most [Void platform features](../../guide/app-types.md#void-apps) work with Astro in both local dev and production when using Astro 7+ with `nodejs_als`.

Void-managed auth is not supported in framework mode yet. Use Better Auth's official Astro integration directly for now.

Pages that access runtime bindings must opt out of prerendering:
Pages and API routes that access runtime bindings must opt out of prerendering:

```astro
---
export const prerender = false;
// now Astro.locals.runtime is available
---
```

Expand All @@ -89,6 +88,8 @@ import { users } from '@schema';
import type { APIRoute } from 'astro';
import { db } from 'void/db';

export const prerender = false;

export const GET: APIRoute = async () => {
const rows = await db.select().from(users);
return Response.json(rows);
Expand All @@ -105,18 +106,20 @@ Declare variables in `env.ts` and read them with `import { env } from "void/env"

Void always uses `VITE_*` for client-exposed schema keys, including in Astro projects. Astro's separate `PUBLIC_*` convention still applies to direct `import.meta.env` access, but it does not change the `void/env` server/client boundary.

`void/env` replaces [`astro:env`](https://docs.astro.build/en/guides/environment-variables/) and `Astro.locals.runtime.env` for env-var access. Keep `Astro.locals.runtime.env` around when you need raw binding access (D1, KV, R2, etc.).
`void/env` replaces [`astro:env`](https://docs.astro.build/en/guides/environment-variables/) for env-var access. Use `env` from `cloudflare:workers` when you need raw binding access (D1, KV, R2, etc.).

## Accessing Bindings Directly

Access bindings via `Astro.locals.runtime.env` (works in both dev and production):
Access bindings with `env` from `cloudflare:workers` (works in both dev and production):

```ts
import type { APIRoute } from 'astro';
import { env } from 'cloudflare:workers';

export const prerender = false;

export const GET: APIRoute = async ({ locals }) => {
const { DB } = locals.runtime.env;
const { results } = await DB.prepare('SELECT * FROM users').all();
export const GET: APIRoute = async () => {
const { results } = await env.DB.prepare('SELECT * FROM users').all();
return Response.json(results);
};
```
Expand All @@ -125,8 +128,10 @@ In `.astro` pages (remember to set `prerender = false`):

```astro
---
import { env } from 'cloudflare:workers';

export const prerender = false;
const { DB } = Astro.locals.runtime.env;
const { results } = await DB.prepare("SELECT * FROM users").all();

const { results } = await env.DB.prepare("SELECT * FROM users").all();
---
```
4 changes: 2 additions & 2 deletions docs/integrations/frameworks/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ TanStack Start and React Router use the Cloudflare Vite plugin provided by Void.
| [SvelteKit](./sveltekit.md) | `@sveltejs/kit` | Vite-based, uses its own Cloudflare adapter |
| [Nuxt](./nuxt.md) | `nuxt` | Own CLI and build toolchain |
| [Analog](./analog.md) | `@analogjs/platform` | Vite-based, uses Nitro with Cloudflare preset |
| [Astro **v6+**](./astro.md) | `astro` | Own CLI and Cloudflare adapter (v6 required) |
| [Astro **v7+**](./astro.md) | `astro` | Own CLI and Cloudflare adapter (v7 required) |

Detection is automatic. The CLI reads your `package.json` dependencies.

Expand All @@ -40,7 +40,7 @@ With `voidPlugin()` added to the framework's Vite config, frameworks get most of

For framework apps, Void revalidation caches public HTML document responses with both `void deploy` and `void deploy --platform cloudflare`. Client data requests continue to use the framework's own behavior. A response with `Set-Cookie` or `Cache-Control: private`, `no-store`, or `no-cache` is never shared.

Frameworks can also access bindings directly via the framework's own mechanisms (e.g. `env` from `cloudflare:workers` in SvelteKit 3 and Analog, `platform.env` in SvelteKit 2, `event.context.cloudflare.env` in Nuxt, `Astro.locals.runtime.env` in Astro).
Frameworks can also access bindings directly via the framework's own mechanisms (e.g. `env` from `cloudflare:workers` in SvelteKit 3, Analog, and Astro, `platform.env` in SvelteKit 2, `event.context.cloudflare.env` in Nuxt).

## Configuration

Expand Down