From 3bd35fcade6e9f6b78eeab0bcbf1c0c2dc05c80c Mon Sep 17 00:00:00 2001 From: pbohlman Date: Fri, 14 Jun 2024 16:09:26 -0400 Subject: [PATCH] docs: update sveltekit setup --- packages/docs/src/pages/frameworks/svelte.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/docs/src/pages/frameworks/svelte.mdx b/packages/docs/src/pages/frameworks/svelte.mdx index 6d4a68b1..e4a9a576 100644 --- a/packages/docs/src/pages/frameworks/svelte.mdx +++ b/packages/docs/src/pages/frameworks/svelte.mdx @@ -57,6 +57,20 @@ export const client = new TriplitClient({ The suggested pattern is to create a client instance in a module and import it into your components. +### `vite.config.ts` + +With the default SvelteKit configuration Vite will not be able to bundle files outside of the `src` or `node_modules` directory. To allow Vite to bundle the files in the `triplit` directory created with `triplit init`, you can add the following configuration to your `vite.config.ts` file: + +```ts filename="vite.config.ts" {6} copy +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; + +export default defineConfig({ + plugins: [sveltekit()], + server: { fs: { allow: ['./triplit'] } }, +}); +``` + ## useQuery The `useQuery` hook subscribes to the provided query inside your Svelte component and will automatically unsubscribe from the query when the component unmounts.