Modules
Edit this page on GitHubSvelteKit makes a number of modules available to your application.
$app/environmentpermalink
ts
import {browser ,building ,dev ,version } from '$app/environment';
browserpermalink
true
if the app is running in the browser.
ts
const browser: boolean;
buildingpermalink
SvelteKit analyses your app during the build
step by running it. During this process, building
is true
. This also applies during prerendering.
ts
const building: boolean;
devpermalink
Whether the dev server is running. This is not guaranteed to correspond to NODE_ENV
or MODE
.
ts
const dev: boolean;
versionpermalink
The value of config.kit.version.name
.
ts
const version: string;
$app/formspermalink
ts
import {applyAction ,deserialize ,enhance } from '$app/forms';
applyActionpermalink
This action updates the form
property of the current page with the given data and updates $page.status
.
In case of an error, it redirects to the nearest error page.
ts
function applyAction<Success extends Record<string, unknown> | undefined = Record<string, any>,Invalid extends Record<string, unknown> | undefined = Record<string, any>
deserializepermalink
Use this function to deserialize the response from a form submission. Usage:
ts
import {deserialize } from '$app/forms';async functionhandleSubmit (event ) {constresponse = awaitfetch ('/form?/action', {method : 'POST',body : newFormData (event .target )});constresult =deserialize (awaitresponse .text ());// ...}
ts
function deserialize<Success extends Record<string, unknown> | undefined = Record<string, any>,Invalid extends Record<string, unknown> | undefined = Record<string, any>
enhancepermalink
This action enhances a <form>
element that otherwise would work without JavaScript.
ts
function enhance<Success extends Record<string, unknown> | undefined = Record<string, any>,Invalid extends Record<string, unknown> | undefined = Record<string, any>>(form: HTMLFormElement,/*** Called upon submission with the given FormData and the `action` that should be triggered.* If `cancel` is called, the form will not be submitted.* You can use the abort `controller` to cancel the submission in case another one starts.* If a function is returned, that function is called with the response from the server.* If nothing is returned, the fallback will be used.** If this function or its return value isn't set, it* - falls back to updating the `form` prop with the returned data if the action is one same page as the form* - updates `$page.status`* - resets the `<form>` element and invalidates all data in case of successful submission with no redirect response* - redirects in case of a redirect response* - redirects to the nearest error page in case of an unexpected error** If you provide a custom function with a callback and want to use the default behavior, invoke `update` in your callback.*/): { destroy(): void };
$app/navigationpermalink
ts
import {afterNavigate ,beforeNavigate ,disableScrollHandling ,goto ,invalidate ,invalidateAll ,preloadCode ,preloadData } from '$app/navigation';
afterNavigatepermalink
A lifecycle function that runs the supplied callback
when the current component mounts, and also whenever we navigate to a new URL.
afterNavigate
must be called during a component initialization. It remains active as long as the component is mounted.
ts
beforeNavigatepermalink
A navigation interceptor that triggers before we navigate to a new URL, whether by clicking a link, calling goto(...)
, or using the browser back/forward controls.
Calling cancel()
will prevent the navigation from completing. If the navigation would have directly unloaded the current page, calling cancel
will trigger the native
browser unload confirmation dialog. In these cases, navigation.willUnload
is true
.
When a navigation isn't client side, navigation.to.route.id
will be null
.
beforeNavigate
must be called during a component initialization. It remains active as long as the component is mounted.
ts
disableScrollHandlingpermalink
If called when the page is being updated following a navigation (in onMount
or afterNavigate
or an action, for example), this disables SvelteKit's built-in scroll handling.
This is generally discouraged, since it breaks user expectations.
ts
function disableScrollHandling(): void;
gotopermalink
Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified url
.
ts
function goto(url: string | URL,opts?: {/*** If `true`, will replace the current `history` entry rather than creating a new one with `pushState`*/replaceState?: boolean;/*** If `true`, the browser will maintain its scroll position rather than scrolling to the top of the page after navigation*/noScroll?: boolean;/*** If `true`, the currently focused element will retain focus after navigation. Otherwise, focus will be reset to the body*/keepFocus?: boolean;/*** The state of the new/updated history entry*/state?: any;/*** If `true`, all `load` functions of the page will be rerun. See https://kit.svelte.dev/docs/load#invalidation for more info on invalidation.*/invalidateAll?: boolean;}): Promise<void>;
invalidatepermalink
Causes any load
functions belonging to the currently active page to re-run if they depend on the url
in question, via fetch
or depends
. Returns a Promise
that resolves when the page is subsequently updated.
If the argument is given as a string
or URL
, it must resolve to the same URL that was passed to fetch
or depends
(including query parameters).
To create a custom identifier, use a string beginning with [a-z]+:
(e.g. custom:state
) — this is a valid URL.
The function
argument can be used define a custom predicate. It receives the full URL
and causes load
to rerun if true
is returned.
This can be useful if you want to invalidate based on a pattern instead of a exact match.
ts
// Example: Match '/path' regardless of the query parametersimport {invalidate } from '$app/navigation';invalidate ((url ) =>url .pathname === '/path');
ts
function invalidate(url: string | URL | ((url: URL) => boolean)): Promise<void>;
invalidateAllpermalink
Causes all load
functions belonging to the currently active page to re-run. Returns a Promise
that resolves when the page is subsequently updated.
ts
function invalidateAll(): Promise<void>;
preloadCodepermalink
Programmatically imports the code for routes that haven't yet been fetched. Typically, you might call this to speed up subsequent navigation.
You can specify routes by any matching pathname such as /about
(to match src/routes/about/+page.svelte
) or /blog/*
(to match src/routes/blog/[slug]/+page.svelte
).
Unlike preloadData
, this won't call load
functions.
Returns a Promise that resolves when the modules have been imported.
ts
function preloadCode(...urls: string[]): Promise<void>;
preloadDatapermalink
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 when the preload is complete.
ts
function preloadData(href: string): Promise<void>;
$app/pathspermalink
ts
import {assets ,base } from '$app/paths';
assetspermalink
An absolute path that matches config.kit.paths.assets
.
If a value for
config.kit.paths.assets
is specified, it will be replaced with'/_svelte_kit_assets'
duringvite dev
orvite preview
, since the assets don't yet live at their eventual URL.
ts
const assets: `https://${string}` | `http://${string}`;
basepermalink
A string that matches config.kit.paths.base
.
Example usage: <a href="{base}/your-page">Link</a>
ts
const base: `/${string}`;
$app/storespermalink
ts
import {getStores ,navigating ,page ,updated } from '$app/stores';
Stores on the server are contextual — they are added to the context of your root component. This means that page
is unique to each request, rather than shared between multiple requests handled by the same server simultaneously.
Because of that, you must subscribe to the stores during component initialization (which happens automatically if you reference the store value, e.g. as $page
, in a component) before you can use them.
In the browser, we don't need to worry about this, and stores can be accessed from anywhere. Code that will only ever run on the browser can refer to (or subscribe to) any of these stores at any time.
getStorespermalink
A function that returns all of the contextual stores. On the server, this must be called during component initialization. Only use this if you need to defer store subscription until after the component has mounted, for some reason.
ts
function getStores(): {navigating: typeof navigating;page: typeof page;updated: typeof updated;};
navigatingpermalink
A readable store.
When navigating starts, its value is a Navigation
object with from
, to
, type
and (if type === 'popstate'
) delta
properties.
When navigating finishes, its value reverts to null
.
ts
pagepermalink
A readable store whose value contains page data.
ts
updatedpermalink
A readable store whose initial value is false
. If version.pollInterval
is a non-zero value, SvelteKit will poll for new versions of the app and update the store value to true
when it detects one. updated.check()
will force an immediate check, regardless of polling.
ts
const updated: Readable<boolean> & { check(): Promise<boolean> };
$env/dynamic/privatepermalink
This module provides access to runtime environment variables, as defined by the platform you're running on. For example if you're using adapter-node
(or running vite preview
), this is equivalent to process.env
. This module only includes variables that do not begin with config.kit.env.publicPrefix
.
This module cannot be imported into client-side code.
ts
import {env } from '$env/dynamic/private';console .log (env .DEPLOYMENT_SPECIFIC_VARIABLE );
In
dev
,$env/dynamic
always includes environment variables from.env
. Inprod
, this behavior will depend on your adapter.
$env/dynamic/publicpermalink
Similar to $env/dynamic/private
, but only includes variables that begin with config.kit.env.publicPrefix
(which defaults to PUBLIC_
), and can therefore safely be exposed to client-side code.
Note that public dynamic environment variables must all be sent from the server to the client, causing larger network requests — when possible, use $env/static/public
instead.
ts
import {env } from '$env/dynamic/public';console .log (env .PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE );
$env/static/privatepermalink
Environment variables loaded by Vite from .env
files and process.env
. Like $env/dynamic/private
, this module cannot be imported into client-side code. This module only includes variables that do not begin with config.kit.env.publicPrefix
.
Unlike $env/dynamic/private
, the values exported from this module are statically injected into your bundle at build time, enabling optimisations like dead code elimination.
ts
import {API_KEY } from '$env/static/private';
Note that all environment variables referenced in your code should be declared (for example in an .env
file), even if they don't have a value until the app is deployed:
MY_FEATURE_FLAG=""
You can override .env
values from the command line like so:
MY_FEATURE_FLAG="enabled" npm run dev
$env/static/publicpermalink
Similar to $env/static/private
, except that it only includes environment variables that begin with config.kit.env.publicPrefix
(which defaults to PUBLIC_
), and can therefore safely be exposed to client-side code.
Values are replaced statically at build time.
ts
import {PUBLIC_BASE_URL } from '$env/static/public';
$internal/pathspermalink
Internal version of $app/paths
assetspermalink
ts
let assets: `https://${string}` | `http://${string}`;
basepermalink
ts
const base: `/${string}`;
set_assetspermalink
ts
function set_assets(path: string): void;
$libpermalink
This is a simple alias to src/lib
, or whatever directory is specified as config.kit.files.lib
. It allows you to access common components and utility modules without ../../../../
nonsense.
$lib/server
permalink
A subdirectory of $lib
. SvelteKit will prevent you from importing any modules in $lib/server
into client-side code. See server-only modules.
$service-workerpermalink
ts
import {build ,files ,prerendered ,version } from '$service-worker';
This module is only available to service workers.
buildpermalink
An array of URL strings representing the files generated by Vite, suitable for caching with cache.addAll(build)
.
During development, this is an empty array.
ts
const build: string[];
filespermalink
An array of URL strings representing the files in your static directory, or whatever directory is specified by config.kit.files.assets
. You can customize which files are included from static
directory using config.kit.serviceWorker.files
ts
const files: string[];
prerenderedpermalink
An array of pathnames corresponding to prerendered pages and endpoints. During development, this is an empty array.
ts
const prerendered: string[];
versionpermalink
See config.kit.version
. It's useful for generating unique cache names inside your service worker, so that a later deployment of your app can invalidate old caches.
ts
const version: string;
@sveltejs/kitpermalink
ts
import {error ,fail ,json ,redirect ,text } from '@sveltejs/kit';
errorpermalink
Creates an HttpError
object with an HTTP status code and an optional message.
This object, if thrown during request handling, will cause SvelteKit to
return an error response without invoking handleError
.
Make sure you're not catching the thrown error, which results in a noop.
errorpermalink
ts
failpermalink
Create an ActionFailure
object.
ts
function fail<T extends Record<string, unknown> | undefined>(status: number,data?: T
jsonpermalink
Create a JSON Response
object from the supplied data.
ts
function json(data: any, init?: ResponseInit): Response;
redirectpermalink
Create a Redirect
object. If thrown during request handling, SvelteKit will return a redirect response.
Make sure you're not catching the thrown redirect, which results in a noop.
ts
function redirect(status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308,location: string
textpermalink
Create a Response
object from the supplied body.
ts
function text(body: string, init?: ResponseInit): Response;
@sveltejs/kit/hookspermalink
ts
import {sequence } from '@sveltejs/kit/hooks';
sequencepermalink
A helper function for sequencing multiple handle
calls in a middleware-like manner.
ts
import {sequence } from '@sveltejs/kit/hooks';Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async functionfirst ({event ,resolve }) {console .log ('first pre-processing');constresult = awaitresolve (event , {transformPageChunk : ({html }) => {// transforms are applied in reverse orderconsole .log ('first transform');returnhtml ;}});Binding element 'event' implicitly has an 'any' type.console .log ('first post-processing');
Binding element 'resolve' implicitly has an 'any' type.7031
7031Binding element 'event' implicitly has an 'any' type.
Binding element 'resolve' implicitly has an 'any' type.returnresult ;}Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async functionsecond ({event ,resolve }) {console .log ('second pre-processing');constresult = awaitresolve (event , {transformPageChunk : ({html }) => {console .log ('second transform');returnhtml ;}});console .log ('second post-processing');returnresult ;}export consthandle =sequence (first ,second );
The example above would print:
first pre-processing
second pre-processing
second transform
first transform
second post-processing
first post-processing
@sveltejs/kit/nodepermalink
ts
import {getRequest ,setResponse } from '@sveltejs/kit/node';
Utilities used by adapters for Node-like environments.
getRequestpermalink
ts
function getRequest(opts: {base: string;request: import('http').IncomingMessage;bodySizeLimit?: number;}): Promise<Request>;
setResponsepermalink
ts
function setResponse(res: import('http').ServerResponse,response: Response): void;
@sveltejs/kit/node/polyfillspermalink
ts
import {installPolyfills } from '@sveltejs/kit/node/polyfills';
A polyfill for fetch
and its related interfaces, used by adapters for environments that don't provide a native implementation.
installPolyfillspermalink
Make various web APIs available as globals:
crypto
fetch
Headers
Request
Response
ts
function installPolyfills(): void;
@sveltejs/kit/vitepermalink
ts
import {sveltekit } from '@sveltejs/kit/vite';
sveltekitpermalink
Returns the SvelteKit Vite plugins.
ts
function sveltekit(): Promise<Plugin[]>;