Types

The type of navigation:

• enter: The app has hydrated
• link: Navigation was triggered by a link click
• goto: Navigation was triggered by a goto(...) call or a redirect
• popstate: Navigation was triggered by back/forward navigation

Call this to prevent the navigation from starting.

• fn A function that groups a set of routes into an entry point

Create entry points that map to individual functions

The application path including any configured base path

• dest the destination folder to which files should be copied
• Returns an array of paths corresponding to the files that have been created by the copy

• dest the destination folder to which files should be copied
• opts.fallback the name of a file for fallback responses, like 200.html or 404.html depending on where the app is deployed
• Returns an array of paths corresponding to the files that have been created by the copy

• dest the destination folder to which files should be copied
• Returns an array of paths corresponding to the files that have been created by the copy

• from the source file or folder
• to the destination file or folder
• opts.filter a function to determine whether a file or folder should be copied
• opts.replace a map of strings to replace
• Returns an array of paths corresponding to the files that have been created by the copy

• directory Path to the directory containing the files to be compressed

Gets a cookie that was previously set with cookies.set, or from the request headers.

Sets a cookie. This will add a set-cookie header to the response, but also make the cookie available via cookies.get during the current request.

The httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.

By default, the path of a cookie is the 'directory' of the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

Deletes a cookie by setting its value to an empty string and setting the expiry date in the past.

By default, the path of a cookie is the 'directory' of the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

• name the name for the cookie
• value value to set the cookie to
• options object containing serialization options

Serialize a cookie name-value pair into a Set-Cookie header string.

The httpOnly and secure options are true by default (except on http://localhost, where secure is false), and must be explicitly disabled if you want cookies to be readable by client-side JavaScript and/or transmitted over HTTP. The sameSite option defaults to lax.

By default, the path of a cookie is the current pathname. In most cases you should explicitly set path: '/' to make the cookie available throughout your app.

The HTTP status code

The error message

• Default undefined

Your adapter is run when executing vite build. It determines how the output is converted for different platforms.

An object containing zero or more aliases used to replace values in import statements. These aliases are automatically passed to Vite and TypeScript.

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    alias: {
      // this will match a file
      'my-file': 'path/to/my-file.js',
 
      // this will match a directory and its contents
      // (`my-directory/x` resolves to `path/to/my-directory/x`)
      'my-directory': 'path/to/my-directory',
 
      // an alias ending /* will only match
      // the contents of a directory, not the directory itself
      'my-directory/*': 'path/to/my-directory/*'
    }
  }
};

The built-in $lib alias is controlled by config.kit.files.lib as it is used for packaging.

You will need to run npm run dev to have SvelteKit automatically generate the required alias configuration in jsconfig.json or tsconfig.json.

The directory relative to paths.assets where the built JS and CSS (and imported assets) are served from. (The filenames therein contain content-based hashes, meaning they can be cached indefinitely). Must not start or end with /.

An object containing zero or more of the following values:

• mode — 'hash', 'nonce' or 'auto'
• directives — an object of [directive]: value[] pairs
• reportOnly — an object of [directive]: value[] pairs for CSP report-only mode

Content Security Policy configuration. CSP helps to protect your users against cross-site scripting (XSS) attacks, by limiting the places resources can be loaded from. For example, a configuration like this...

ts
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    csp: {
      directives: {
        'script-src': ['self']
      },
      reportOnly: {
        'script-src': ['self']
      }
    }
  }
};
 
export default config;

...would prevent scripts loading from external sites. SvelteKit will augment the specified directives with nonces or hashes (depending on mode) for any inline styles and scripts it generates.

To add a nonce for scripts and links manually included in app.html, you may use the placeholder %sveltekit.nonce% (for example <script nonce="%sveltekit.nonce%">).

When pages are prerendered, the CSP header is added via a <meta http-equiv> tag (note that in this case, frame-ancestors, report-uri and sandbox directives will be ignored).

When mode is 'auto', SvelteKit will use nonces for dynamically rendered pages and hashes for prerendered pages. Using nonces with prerendered pages is insecure and therefore forbidden.

Note that most Svelte transitions work by creating an inline <style> element. If you use these in your app, you must either leave the style-src directive unspecified or add unsafe-inline.

Protection against cross-site request forgery attacks:

• checkOrigin — if true, SvelteKit will check the incoming origin header for POST form submissions and verify that it matches the server's origin

To allow people to make POST form submissions to your app from other origins, you will need to disable this option. Be careful!

Environment variable configuration

Where to find various files within your project.

Inline CSS inside a <style> block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file to be inlined. All CSS files needed for the page and smaller than this value are merged and inlined in a <style> block.

This results in fewer initial requests and can improve your First Contentful Paint score. However, it generates larger HTML output and reduces the effectiveness of browser caches. Use it advisedly.

An array of file extensions that SvelteKit will treat as modules. Files with extensions that match neither config.extensions nor config.kit.moduleExtensions will be ignored by the router.

The directory that SvelteKit writes files to during dev and build. You should exclude this directory from version control.

See Prerendering.

Client-side navigation can be buggy if you deploy a new version of your app while people are using it. If the code for the new page is already loaded, it may have stale content; if it isn't, the app's route manifest may point to a JavaScript file that no longer exists. SvelteKit solves this problem by falling back to traditional full-page navigation if it detects that a new version has been deployed, using the name specified here (which defaults to a timestamp of the build).

If you set pollInterval to a non-zero value, SvelteKit will poll for new versions in the background and set the value of the updated store to true when it detects one.

fetch is equivalent to the native fetch web API, with a few additional features:

• it can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request
• it can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context)
• internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call
• during server-side rendering, the response will be captured and inlined into the rendered HTML. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
• during hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request

Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it.

Contains the data returned by the route's server load function (in +layout.server.js or +page.server.js), if any.

If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:

ts
export async function load({ fetch, setHeaders }) {
Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.7031
7031Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.
  const url = `https://cms.example.com/articles.json`;
  const response = await fetch(url);
 
  setHeaders({
    age: response.headers.get('age'),
    'cache-control': response.headers.get('cache-control')
  });
 
  return response.json();
}

Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.

You cannot add a set-cookie header with setHeaders — use the cookies API in a server-only load function instead.

setHeaders has no effect when a load function runs in the browser.

await parent() returns data from parent +layout.js load functions. Implicitly, a missing +layout.js is treated as a ({ data }) => data function, meaning that it will return and forward data from parent +layout.server.js files.

Be careful not to introduce accidental waterfalls when using await parent(). If for example you only want to merge parent data into the returned output, call it after fetching your other data.

This function declares that the load function has a dependency on one or more URLs or custom identifiers, which can subsequently be used with invalidate() to cause load to rerun.

Most of the time you won't need this, as fetch calls depends on your behalf — it's only necessary if you're using a custom API client that bypasses fetch.

URLs can be absolute or relative to the page being loaded, and must be encoded.

Custom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the URI specification.

The following example shows how to use depends to register a dependency on a custom identifier, which is invalidated after a button click, making the load function rerun.

ts
let count = 0;
export async function load({ depends }) {
Binding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.
  depends('increase:count');
 
  return { count: count++ };
}

// @errors: 7031
<script>
  import { invalidate } from '$app/navigation';

  export let data;

  const increase = async () => {
    await invalidate('increase:count');
  }
</script>

<p>{data.count}<p>
<button on:click={increase}>Increase Count</button>

Where navigation was triggered from

Where navigation is going to/has gone to

The type of navigation:

• leave: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
• link: Navigation was triggered by a link click
• goto: Navigation was triggered by a goto(...) call or a redirect
• popstate: Navigation was triggered by back/forward navigation

Whether or not the navigation will result in the page being unloaded (i.e. not a client-side navigation)

In case of a history back/forward navigation, the number of steps to go back/forward

The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object

Info about the current route

The URL of the current page

The URL of the current page

The parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object

Info about the current route

Http status code of the current page

The error object of the current page, if any. Filled from the handleError hooks.

The merged result of all data from all load functions on the current page. You can type a common denominator through App.PageData.

Filled only after a form submission. See form actions for more info.

The HTTP status code

The location to redirect to

Get or set cookies related to the current request

fetch is equivalent to the native fetch web API, with a few additional features:

• it can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request
• it can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context)
• internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call

Cookies will only be passed through if the target host is the same as the SvelteKit application or a more specific subdomain of it.

The client's IP address, set by the adapter.

Contains custom data that was added to the request within the handle hook.

The parameters of the current page or endpoint - e.g. for a route like /blog/[slug], a { slug: string } object

Additional data made available through the adapter.

The original request object

Info about the current route

If you need to set headers for the response, you can do so using the this method. This is useful if you want the page to be cached, for example:

ts
export async function load({ fetch, setHeaders }) {
Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.7031
7031Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.
  const url = `https://cms.example.com/articles.json`;
  const response = await fetch(url);
 
  setHeaders({
    age: response.headers.get('age'),
    'cache-control': response.headers.get('cache-control')
  });
 
  return response.json();
}

Setting the same header multiple times (even in separate load functions) is an error — you can only set a given header once.

You cannot add a set-cookie header with setHeaders — use the cookies API instead.

The URL of the current page or endpoint

• input the html chunk and the info if this is the last chunk

Applies custom transforms to HTML. If done is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML (they could include an element's opening tag but not its closing tag, for example) but they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.

• name header name
• value header value

Determines which headers should be included in serialized responses when a load function loads a resource with fetch. By default, none will be included.

• input the type of the file and its path

Determines what should be added to the <head> tag to preload it. By default, js, css and font files will be preloaded.

private fields

await parent() returns data from parent +layout.server.js load functions.

Be careful not to introduce accidental waterfalls when using await parent(). If for example you only want to merge parent data into the returned output, call it after fetching your other data.

This function declares that the load function has a dependency on one or more URLs or custom identifiers, which can subsequently be used with invalidate() to cause load to rerun.

Most of the time you won't need this, as fetch calls depends on your behalf — it's only necessary if you're using a custom API client that bypasses fetch.

URLs can be absolute or relative to the page being loaded, and must be encoded.

Custom identifiers have to be prefixed with one or more lowercase letters followed by a colon to conform to the URI specification.

The following example shows how to use depends to register a dependency on a custom identifier, which is invalidated after a button click, making the load function rerun.

ts
let count = 0;
export async function load({ depends }) {
Binding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.
  depends('increase:count');
 
  return { count: count++ };
}

// @errors: 7031
<script>
  import { invalidate } from '$app/navigation';

  export let data;

  const increase = async () => {
    await invalidate('increase:count');
  }
</script>

<p>{data.count}<p>
<button on:click={increase}>Increase Count</button>

A string that uniquely identifies an HTTP service (e.g. serverless function) and is used for deduplication. For example, /foo/a-[b] and /foo/[c] are different routes, but would both be represented in a Netlify _redirects file as /foo/:param, so they share an ID

A function that compares the candidate route with the current route to determine if it should be treated as a fallback for the current route. For example, /foo/[c] is a fallback for /foo/a-[b], and /[...catchall] is a fallback for all routes

A function that is invoked once the entry has been created. This is where you should write the function to the filesystem and generate redirect manifests.

An array of prerendered paths (without trailing slashes, regardless of the trailingSlash config)