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
• Simple Search Astro component based on Pagefind Searchbox
• Supports customized base URL path
• Supports multiple instances of the component on a page
• Supports Astro view transitions
• Allows passing index config to pagefind

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({
  integrations: [pagefind()],
});

Add search component on a page:

---
import Search from "astro-pagefind/components/Search.astro";
---

<Search instance="search" className="pagefind-ui" searchboxOptions={{ placeholder: "search" }} />

See Main.layout for a usage example.

Pagefind 1.5.0

Pagefind has introduced component-based UI in version 1.5.0. It is now much easier to integrate Pagefind UI into Astro projects. New users are encouraged to integrate Pagefind UI component directly instead of using the astro-pagefind/components/Search.astro component. This component is now in maintenance mode and will not receive any new UI-related features anymore. You have to import astro-pagefind/components/PagefindConfig.astro component to get the Pagefind bundle path wired correctly.

Here is how to get the searchbox UI on a page:

---
import PagefindConfig from "astro-pagefind/components/PagefindConfig.astro";
---

<PagefindConfig />
<pagefind-searchbox></pagefind-searchbox>

See Main.layout for a more detailed example.

For more details and information on Pagefind UI please consult Pagefind docs directly.