Astro integration for Pagefind static site search.
- Build pagefind index upon static build
- Serve previously prebuilt search index in
astro dev
mode - Search Astro component
- Supports customized base URL path
- Supports multiple instances of the component on a page
- Supports pre-filled search query
- Supports Astro view transitions
Install:
npm i astro-pagefind
Add integration to the Astro config:
//astro.config.ts
import { defineConfig } from "astro/config";
import pagefind from "astro-pagefind";
export default defineConfig({
build: {
format: "file",
},
integrations: [pagefind()],
});
Add search component on a page:
---
import Search from "astro-pagefind/components/Search";
---
<Search id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />
See Main.layout for a usage example.
In SSR mode Astro provides access to URL query parameters which can be used to pre-fill search query via a prop:
---
import Search from "astro-pagefind/components/Search";
export const prerender = false;
const q = Astro.url.searchParams.get("q") ?? undefined;
---
<Search query={q} />
See prefilled.astro for a full example.