--- url: https://lune-js.com/integrations/astro.md --- # Astro Integration Guide [`@lune-js/astro`](https://github.com/lune-js/astro) is an [Astro integration](https://docs.astro.build/en/guides/integrations/) that adds Lune to every page of your site. Astro renders the HTML, the integration boots a single Lune app on the client, and your directives work anywhere in your markup — no ` ``` The guard matters: listeners on `document` survive swaps, so registering unconditionally would stack a new listener on every navigation. > \[!NOTE] > The remounted app is built by the [integration's `createApp`](#window-lune), so your entrypoint's `data` and customizations survive client-side navigation — scope factories stay available on pages reached by a swap. ## Troubleshooting **Nothing is reactive and no errors appear.** Check that the interactive markup is inside an element with `lu-scope`. Lune only walks elements it mounts to. **A page renders {{ }} literally, or the build fails with `ReferenceError`.** Astro consumed the braces. Learn more about [Astro's syntax](https://docs.astro.build/en/reference/astro-syntax). **An expression silently does nothing.** Expressions that reference `window`, `document`, `fetch`, `eval`, and similar globals are rejected for safety, with a warning in development. Move the logic into a scope method — see [Security](/advanced/security). **Directives or scope factories from the entrypoint are missing.** Confirm the module has the export you need — `default` for directives and plugins, `data` for root-scope factories and `$delimiters` — and that the `entrypoint` path resolves from your project root, not from the config file's directory. An entrypoint that exports neither warns in development.