Astro-Pagefind

Astro integration for Pagefind static site search.

Features

• 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

Usage

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.

Pre-filled Search Query

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.