https://github.com/Hugos68/vite-plugin-pagefind
A Vite plugin for easily integrating pagefind into Vite based projects.
https://github.com/Hugos68/vite-plugin-pagefind
pagefind pagefind-js vite vite-plugin vitejs
Last synced: about 2 months ago
JSON representation
A Vite plugin for easily integrating pagefind into Vite based projects.
- Host: GitHub
- URL: https://github.com/Hugos68/vite-plugin-pagefind
- Owner: Hugos68
- License: mit
- Created: 2024-01-27T20:40:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-19T18:33:11.000Z (about 1 year ago)
- Last Synced: 2024-05-22T15:35:11.140Z (about 1 year ago)
- Topics: pagefind, pagefind-js, vite, vite-plugin, vitejs
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-pagefind
- Size: 491 KB
- Stars: 10
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-pagefind - Integrate `pagefind` search. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-pagefind - Integrate `pagefind` search. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-pagefind
A Vite plugin for easily integrating [Pagefind](https://pagefind.app/) into [Vite](https://vite.dev/) based projects.
## Features
- Pagefind works during development.
- Pagefind can be safely imported.
## Installation
Install from npm using your preferred package manager:
```bash
pnpm add -D pagefind vite-plugin-pagefind
```
## Usage
1. Add the plugin to in `vite.config`:
```ts
import { defineConfig } from "vite";
import { pagefind } from "vite-plugin-pagefind";
export default defineConfig({
plugins: [
pagefind({
outputDirectory: "",
assetsDirectory: "",
bundleDirectory: "",
buildScript: "",
developStrategy: "",
}),
],
});
```
2. Add the post build step of running `pagefind` in your `package.json`:
```json
{
"scripts": {
"": "vite build && pagefind --site \"\""
}
}
```
## 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](https://github.com/CloudCannon/pagefind/blob/production-docs/pagefind_web_js/types/index.d.ts):
```ts
import type { Pagefind } from "vite-plugin-pagefind/types";
const pagefind: Pagefind = await import("/pagefind/pagefind.js");
```