Installation

Install svelte-sv-extension as a development dependency.

deno add --dev npm:svelte-sv-extension

bun add --dev svelte-sv-extension

pnpm add -D svelte-sv-extension

npm install --save-dev svelte-sv-extension

yarn add --dev svelte-sv-extension

nub add --dev svelte-sv-extension

aube add --dev svelte-sv-extension

vlt install --save-dev svelte-sv-extension

Wrap the SvelteKit config passed through Vite:

import { sveltekit } from "@sveltejs/kit/vite";
import { sv } from "svelte-sv-extension";
import { defineConfig } from "vite";

import adapter from "@sveltejs/adapter-auto";

const { kit, ...svelte_config } = sv({
	kit: {
		adapter: adapter(),
	},
});

export default defineConfig({
	plugins: [sveltekit({ ...svelte_config, ...kit })],
});

sv() can wrap an empty config or an existing SvelteKit config. It deduplicates the extension list and preserves fields such as adapters, aliases, preprocessors, compiler options, and an existing kit.typescript.config callback.

SvelteKit's direct Vite API flattens the traditional kit block, so the example separates that block from the surrounding Svelte config and spreads both into sveltekit().

If both +page.svelte and +page.sv exist in one route directory, SvelteKit reports a duplicate route component in the same way it does for any two files that claim the same route role.