Migrating to SvelteKit v3

npx sv migrate sveltekit-3

import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig } from 'vite';
import { function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>
Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit } from '@sveltejs/kit/vite';
import function adapter(): Adapteradapter from '@sveltejs/adapter-auto';

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.
plugins: [
		function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>
Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit({
			compilerOptions?: Omit<CompileOptions, "filename" | "format" | "generate"> | undefined
The options to be passed to the Svelte compiler. A few options are set by default,
including dev and css. However, some options are non-configurable, like
filename, format, generate, and cssHash (in dev).
@see
https://svelte.dev/docs/svelte/svelte-compiler#CompileOptionscompilerOptions: { 
experimental?: {
    async?: boolean;
} | undefined
Experimental options
@since
5.36experimental: { async?: boolean | undefined
Allow await keyword in deriveds, template expressions, and the top level of components
@since
5.36async: true }},
			KitConfig.adapter?: Adapter | undefined
Your adapter is run when executing vite build. It determines how the output is converted for different platforms.
@default
undefinedadapter: function adapter(): Adapteradapter()
		})
	]
});

{
	"imports": {
		"#lib": "./src/lib/index.js",
		"#lib/*": "./src/lib/*"
	}
}

// instead of this...
pushState('/foo', state);
replaceState('/bar', state);

// ...do this:
function goto(url: string | URL, opts?: import("@sveltejs/kit").GotoOptions): Promise<void>
Allows you to navigate programmatically to a given route, with control over details such as whether scroll and focus are reset
(as they would be with a regular navigation) or preserved.
Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) or the state change has been applied.
goto is intended for navigations to routes that belong to the app, and will reject if a route cannot be resolved.
For external URLs, use window.location = url to perform a full-page navigation instead of calling goto(url).
@param
url Where to navigate to. Note that if you've set config.paths.base and the URL is root-relative, you need to prepend the base path if you want to navigate within the app.
@param
opts Options related to the navigationgoto('/foo', { GotoOptions.shallow?: boolean | undefined
If true, updates the URL and page.state without navigating.
@default
falseshallow: true, GotoOptions.state?: App.PageState | undefined
An optional object that will be available as page.state.
state });
function goto(url: string | URL, opts?: import("@sveltejs/kit").GotoOptions): Promise<void>
Allows you to navigate programmatically to a given route, with control over details such as whether scroll and focus are reset
(as they would be with a regular navigation) or preserved.
Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) or the state change has been applied.
goto is intended for navigations to routes that belong to the app, and will reject if a route cannot be resolved.
For external URLs, use window.location = url to perform a full-page navigation instead of calling goto(url).
@param
url Where to navigate to. Note that if you've set config.paths.base and the URL is root-relative, you need to prepend the base path if you want to navigate within the app.
@param
opts Options related to the navigationgoto('/bar', { GotoOptions.shallow?: boolean | undefined
If true, updates the URL and page.state without navigating.
@default
falseshallow: true, GotoOptions.replace?: boolean | undefined
If true, replaces the current history entry rather than creating a new one.
@default
falsereplace: true, GotoOptions.state?: App.PageState | undefined
An optional object that will be available as page.state.
state });

const 
const result: ({
    type: "loaded";
    data: Record<string, any>;
} | {
    type: "redirect";
    location: string;
} | {
    type: "error";
    error: App.Error;
}) & {
    status: number;
}result = await 
function preloadData(href: string): Promise<({
    type: "loaded";
    data: Record<string, any>;
} | {
    type: "redirect";
    location: string;
} | {
    type: "error";
    error: App.Error;
}) & {
    status: number;
}>
Programmatically preloads the given page, which means

ensuring that the code for the page is loaded, and
calling the page's load function with the appropriate options.

This is the same behaviour that SvelteKit triggers when the user taps or mouses over an <a> element with data-sveltekit-preload-data.
If the next navigation is to href, the values returned from load will be used, making navigation instantaneous.
Returns a Promise that resolves with the result of running the new route's load functions once the preload is complete.
@param
href Page to preload
referencepreloadData(const url: "/somewhere"url);

if (
const result: ({
    type: "loaded";
    data: Record<string, any>;
} | {
    type: "redirect";
    location: string;
} | {
    type: "error";
    error: App.Error;
}) & {
    status: number;
}result.type: "loaded" | "redirect" | "error"type === 'loaded') {
	// ...
} else if (
const result: ({
    type: "redirect";
    location: string;
} & {
    status: number;
}) | ({
    type: "error";
    error: App.Error;
} & {
    status: number;
})result.type: "redirect" | "error"type === 'error') {
	// do something in case of an error
}

// instead of this...
const pathname = base + resolveRoute('/blog/[slug]', { slug });
const file = assets + '/foo.png';

// ...do this:
const const pathname: stringpathname = resolve<"/blog/[slug]">(route: "/blog/[slug]", params: Record<string, string>): ResolvedPathname
Resolve a pathname by prefixing it with the base path, if any, or resolve a route ID by populating dynamic segments with parameters.
During server rendering, the base path is relative and depends on the page currently being rendered.
@example
import { resolve } from '$app/paths';

// using a pathname
const resolved = resolve(`blog/hello-world`);

// using a route ID plus parameters
const resolved = resolve('/blog/[slug]', {
	slug: 'hello-world'
});
@since
2.26resolve('/blog/[slug]', { slug: stringslug });
const const file: stringfile = function asset(file: AssetPath): string
Resolve the URL of an asset in your static directory, by prefixing it with config.paths.assets if configured, or otherwise by prefixing it with the base path.
During server rendering, the base path is relative and depends on the page currently being rendered.
@example
<script>
	import { asset } from '$app/paths';
</script>

<img alt="a potato" src={asset('potato.jpg')} />
@since
2.26asset('foo.png');

const const url: URLurl = new var URL: new (url: string | URL, base?: string | URL) => URL
The URL interface is used to parse, construct, normalize, and encode URLs. It works by providing properties which allow you to easily read and modify the components of a URL.
MDN Reference
URL class is a global reference for import { URL } from 'url'
https://nodejs.org/api/url.html#the-whatwg-url-api
@since
v10.0.0URL(page.url.href);
const url: URLurl.URL.searchParams: URLSearchParams
The searchParams read-only property of the URL interface returns a URLSearchParams object allowing access to the GET decoded query arguments contained in the URL.
MDN Reference
searchParams.URLSearchParams.set(name: string, value: string): void
The set() method of the URLSearchParams interface sets the value associated with a given search parameter to the given value. If there were several matching values, this method deletes the others. If the search parameter doesn't exist, this method creates it.
MDN Reference
set('q', 'svelte');

<script>
	import { page } from '$app/state';
</script>

<p>current pathname: {page.url.pathname}</p>

{
	"extends": "$app/tsconfig",
	"include": ["src", "test", "*"],
	"exclude": ["src/service-worker"]
}

{
	"extends": "$app/tsconfig/service-worker"
}

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.
plugins: [
		function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>
Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit({
			
KitConfig.csrf?: {
    checkOrigin?: boolean;
    trustedOrigins?: string[];
} | undefined
Protection against cross-site request forgery (CSRF) attacks.
csrf: {
				checkOrigin: false
				trustedOrigins?: string[] | undefined
An array of origins that are allowed to make cross-origin form submissions to your app.
Each origin should be a complete origin including protocol (e.g., https://payment-gateway.com).
This is useful for allowing trusted third-party services like payment gateways or authentication providers to submit forms to your app.
If the array contains '*', all origins will be trusted. This is generally not recommended!
 Only add origins you completely trust, as this bypasses CSRF protection for those origins.
CSRF checks only apply in production, not in local development.
@default
[]
@example
['https://checkout.stripe.com', 'https://accounts.google.com']trustedOrigins: ['https://trusted-site.com']
			}
		})
	]
});

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.server?: ServerOptions$1 | undefined
Server specific options, e.g. host, port, https...
server: {
		CommonServerOptions.cors?: boolean | CorsOptions | undefined
Configure CORS for the dev server.
Uses https://github.com/expressjs/cors.
When enabling this option, we recommend setting a specific value
rather than true to avoid exposing the source code to untrusted origins.
Set to true to allow all methods from any origin, or configure separately
using an object.
@default
falsecors: { CorsOptions.origin?: CorsOrigin | ((origin: string | undefined, cb: (err: Error, origins: CorsOrigin) => void) => void) | undefined
Configures the Access-Control-Allow-Origin CORS header.
We recommend setting a specific value rather than
true to avoid exposing the source code to untrusted origins.
origin: '*' }
	}
});

const cookies: Cookiescookies.Cookies.set: (name: string, value: string, opts: SerializeOptions) => void
Sets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get or cookies.getAll during the current request.
The httpOnly is true by default, as is secure, except during development, when it defaults to false. These must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP.
The path option is '/' by default. You can use relative paths, or set path: '' to make the cookie only available on the current path and its children.
@param
name the name of the cookie
@param
value the cookie value
@param
opts the options passed to cookie.stringifySetCookie with the SvelteKit defaults described above. See documentation hereset(const name: stringname, const value: stringvalue, { path?: string | undefined
Specifies the value for the Path Set-Cookie attribute.
When no path is set, the path is considered the "default path".
path: '/some/path' });

import { function defineParams<T extends Record<string, ParamDefinition>>(definitions: T): DefinedParams<T>
Define parameter matchers for your app.
referencedefineParams } from '@sveltejs/kit';
import * as import vv from 'valibot';

export const 
const params: DefinedParams<{
    integer: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.ToNumberAction<string, undefined>]>;
    fruit: (param: string) => "apple" | "orange" | undefined;
}>params = 
defineParams<{
    integer: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.ToNumberAction<string, undefined>]>;
    fruit: (param: string) => "apple" | "orange" | undefined;
}>(definitions: {
    integer: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.ToNumberAction<string, undefined>]>;
    fruit: (param: string) => "apple" | "orange" | undefined;
}): DefinedParams<{
    integer: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.ToNumberAction<string, undefined>]>;
    fruit: (param: string) => "apple" | "orange" | undefined;
}>
Define parameter matchers for your app.
referencedefineParams({
	// schema variant
	integer: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.ToNumberAction<string, undefined>]>integer: import vv.
pipe<v.StringSchema<undefined>, v.ToNumberAction<string, undefined>>(schema: v.StringSchema<undefined>, item1: v.ToNumberAction<string, undefined> | v.PipeAction<string, number, v.ToNumberIssue<string>>): v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.ToNumberAction<string, undefined>]> (+20 overloads)
export pipe
Adds a pipeline to a schema, that can validate and transform its input.
@param
schema The root schema.
@param
item1 The first pipe item.
@returns
A schema with a pipeline.pipe(import vv.
function string(): v.StringSchema<undefined> (+1 overload)
export string
Creates a string schema.
@returns
A string schema.string(), import vv.
toNumber<string>(): v.ToNumberAction<string, undefined> (+1 overload)
export toNumber
Creates a to number transformation action.
@returns
A to number action.
@betatoNumber()),

	// function variant
	fruit: (param: string) => "apple" | "orange" | undefinedfruit: (param: stringparam) => {
		if (param: stringparam === 'apple' || param: stringparam === 'orange') {
			return param: "apple" | "orange"param;
		}
	}
});

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.
plugins: [
		function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>
Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit({
			
KitConfig.tracing?: {
    server?: boolean;
} | undefined
Options for enabling OpenTelemetry tracing for SvelteKit operations.
@default
{ server: false }tracing: { server?: boolean | undefined
Enables server-side OpenTelemetry span emission for SvelteKit operations including the handle hook, load functions, form actions, and remote functions. Tracing — and more significantly, observability instrumentation — can have a nontrivial overhead, so consider whether you really need it, or if it might be more appropriate to turn it on in development and preview environments only.
@default
falseserver: true }
		})
	]
});

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.
plugins: [
		function sveltekit(config?: KitConfig & Omit<Options, "onwarn"> & Pick<SvelteConfig, "vitePlugin">): Promise<Plugin[]>
Returns the SvelteKit Vite plugins.
Any options that don't belong to SvelteKit are passed through to vite-plugin-svelte.
Since version 3.0.0 you must pass configuration directly.
Since version 2.62.0 you can pass configuration directly, in which case svelte.config.js is ignored.
referencesveltekit({
			compilerOptions?: Omit<CompileOptions, "filename" | "format" | "generate"> | undefined
The options to be passed to the Svelte compiler. A few options are set by default,
including dev and css. However, some options are non-configurable, like
filename, format, generate, and cssHash (in dev).
@see
https://svelte.dev/docs/svelte/svelte-compiler#CompileOptionscompilerOptions: {
				
experimental?: {
    async?: boolean;
} | undefined
Experimental options
@since
5.36experimental: {
					async?: boolean | undefined
Allow await keyword in deriveds, template expressions, and the top level of components
@since
5.36async: true
				}
			},
			
KitConfig.experimental?: ({
    remoteFunctions?: boolean;
    forkPreloads?: boolean;
} & ExperimentalOptions) | undefined
Experimental features. Here be dragons. These are not subject to semantic versioning, so breaking changes or removal can happen in any release.
These options are considered experimental and breaking changes to them can occur in any release
experimental: {
				remoteFunctions?: boolean | undefined
Whether to enable the experimental remote functions feature. This feature is not yet stable and may be changed or removed at any time.
@default
falseremoteFunctions: true
			}
		})
	]
});

<input {...myform.fields.message.as('text')}>

<a href="..." data-sveltekit-preload-data="off">
<a href="..." data-sveltekit-preload-data="false">

function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | ({} & number), location: string | URL, options?: {
    external?: boolean | string[];
}): never
Redirect a request. When called during request handling, SvelteKit will return a redirect response.
Make sure you're not catching the thrown redirect, which would prevent SvelteKit from handling it.
Most common status codes:

303 See Other: redirect as a GET request (often used after a form POST request)
307 Temporary Redirect: redirect will keep the request method
308 Permanent Redirect: redirect will keep the request method, SEO will be transferred to the new page

See all redirect status codes
@param
status The HTTP status code. Must be in the range 300-308.
@param
location The location to redirect to.
@param
options To redirect to an external URL, you must pass { external: true } to allow any external URL except javascript: URLs, or { external: [...] } with an allowlist of permitted origins.
@throws
import('./public.js').Redirect This error instructs SvelteKit to redirect to the specified location.
@throws
Error If the provided status is invalid, the location cannot be used as a header value, or the location is an external URL without permission.
referenceredirect(307, 'https://example.com', { external?: boolean | string[] | undefinedexternal: true });