Sveltekit Pagefind
How to use Pagefind with sveltekit
Install pagefind search ui
pnpm add @pagefind/default-ui -D
Create pagefind config
site: build
Modify build script
- "build": "vite build",
+ "build": "vite build && npx pagefind",
Add search
<script>
import { onMount } from 'svelte';
import { PagefindUI } from '@pagefind/default-ui';
import '@pagefind/default-ui/css/ui.css';
let searchInput;
onMount(() => {
new PagefindUI({
element: searchInput,
showSubResults: true,
showImages: false,
showEmptyFilters: false,
});
});
</script>
<div bind:this={searchInput} />
Test in in development
Build the project and copy the build/pagefind folder to static/pagefind
You probably also want to add static/pagefind to your .gitignore file
Make sure to delete it after you tested it
More
Search with url query
Example code here: