On this page
Installation
Install SER in SvelteKit with svelte-plugin-composer.SER only needs one package, but we recommend installing both of these:
svelte-effect-runtimesvelte-plugin-composer
Install both, then wire effect() through composer in vite.config.ts .
Installing
Install the packages with your package manager.
deno add npm:svelte-effect-runtimebun add svelte-effect-runtimepnpm add svelte-effect-runtimenpm install svelte-effect-runtimeyarn add svelte-effect-runtimenub add svelte-effect-runtimeaube add svelte-effect-runtimevlt install svelte-effect-runtimedeno add npm:svelte-plugin-composerbun add --dev svelte-plugin-composerpnpm add -D svelte-plugin-composernpm install --save-dev svelte-plugin-composeryarn add --dev svelte-plugin-composernub add --dev svelte-plugin-composeraube add --dev svelte-plugin-composervlt install --save-dev svelte-plugin-composerConfigure Vite
Update your vite.config.ts with the following code:
vite.config.ts
import { defineConfig } from "vite";
import { sveltekit } from "@sveltejs/kit/vite";
import { effect } from "svelte-effect-runtime";
import { compose } from "svelte-plugin-composer";
export default defineConfig({
plugins: compose([
effect(),
sveltekit({
compilerOptions: {
experimental: {
async: true,
},
runes: ({ filename }) =>
filename.split(/[/\\]/).includes("node_modules") ? undefined : true,
},
experimental: {
remoteFunctions: true,
},
}),
]),
});You should now have added compose(), effect() and enabled both experiments for remote functions and async rendering in Svelte.