Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-19T18:33:11.000Z (4 months ago)
- Last Synced: 2024-05-22T15:35:11.140Z (4 months 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 into Vite based projects.
## Features
- Ensures pagefind is present during development.
- Ensures pagefind can be safely used through dynamic imports in conjunction with Vite.
## Why?
Read about the reasoning for this plugin here: [https://hugokorte.pages.dev/articles/pagefind-with-vite](https://portfolio-2-70z.pages.dev/blog/pagefind-with-vite/)
## 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`:
```ts
import { defineConfig } from "vite";
import pagefind from "vite-plugin-pagefind";
export default defineConfig({
plugins: [pagefind()],
});
```
Note: If your framework does not have a `vite.config` consider consulting the framework documentation to see how to add a Vite plugin.
2. Add the post build command to your `package.json`:
```json
{
"scripts": {
"build": "vite build && pagefind"
}
}
```
3. Add the `pagefind.json` config to your project:
```json
{
"site": "",
"vite_plugin_pagefind": {
"assets_dir": "",
"build_command": "",
"dev_strategy": ""
}
}
```
Note: `vite-plugin-pagefind` currently only supports `.json` files, more are planned be supported in the future.
## Config
### site
The directory where your build output lives, this is required for both pagefind and this plugin.
### assets_dir
The directory where the static assets are located relative to the project's root as specified in the vite config.
_default_: 'public'
### build_command
The command to build and index the project.
_default_: 'npm run build'
### dev_strategy
The indexing strategy used during development:
- "eager": Build and index the app every time the development server starts
- "lazy": Build and index the app only if the pagefind bundle isn't present already
_default_: 'lazy'
## Types
Apart from the plugin, this package also exposes [the types from pagefind](https://github.com/CloudCannon/pagefind/blob/production-docs/pagefind_web_js/types/index.d.ts) as well as extending them by providing an additional `Pagefind` type:
```ts
import type { Pagefind } from "vite-plugin-pagefind/types";
const pagefind: Pagefind = await import("/pagefind/pagefind.js");
```
## Pagefind
For further questions regarding Pagefind itself you can refer to [the offical docs](https://pagefind.app/).
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.