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

1. 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>",
        }),
    ],
});

1. 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");