vite-plugin-pagefind

vite-plugin-pagefind

A Vite plugin for easily integrating Pagefind into Vite based projects.

Features

• Pagefind works during development.
• Pagefind can be safely imported.

Installation

Install from npm using your preferred package manager:

pnpm add -D pagefind vite-plugin-pagefind

Usage

• Add the plugin to in vite.config:

import { defineConfig } from "vite";
import { pagefind } from "vite-plugin-pagefind";

export default defineConfig({
  plugins: [
    pagefind({
      outputDirectory: "<OUTPUT_DIRECTORY>",
      assetsDirectory: "<ASSETS_DIRECTORY>",
      bundleDirectory: "<BUNDLE_DIRECTORY>",
      buildScript: "<BUILD_SCRIPT>",
      developStrategy: "<DEVELOP_STRATEGY>",
    }),
  ],
});

• Add the post build step of running pagefind in your package.json:

{
  "scripts": {
    "<BUILD_SCRIPT>": "vite build && pagefind --site \"<OUTPUT_DIRECTORY>\""
  }
}

Config

outputDirectory

The directory where the build output is located in.

default: 'build'

assetsDirectory

The directory where the static assets are located in.

default: 'public'

bundleDirectory

The directory where the pagefind bundle is located in.

default: 'pagefind'

buildScript

The script that builds the app.

default: 'build'

developStrategy

The indexing strategy used during development:

• "lazy": Build and index the output only if the bundle is not present.
• "eager": Build and index the output regardless of the bundle's presence.

default: 'lazy'

Types

As well as the plugin, this package also exposes the official Pagefind types:

import type { Pagefind } from "vite-plugin-pagefind/types";

const pagefind: Pagefind = await import("/pagefind/pagefind.js");