Reference

Modules

SvelteKit では、数多くのモジュールがアプリケーションで利用可能です。

$app/environmentpermalink

ts
import { browser, dev, building, version } from '$app/environment';

browserpermalink

true if the app is running in the browser.

ts
const browser: boolean;

devpermalink

Whether the dev server is running. This is not guaranteed to correspond to NODE_ENV or MODE.

ts
const dev: 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;

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,
	Failure extends Record<string, unknown> | undefined
>(
	result: import('@sveltejs/kit').ActionResult<
		Success,
		Failure
	>
): Promise<void>;

deserializepermalink

Use this function to deserialize the response from a form submission. Usage:

ts
import { deserialize } from '$app/forms';

async function handleSubmit(event) {
  const response = await fetch('/form?/action', {
	method: 'POST',
	body: new FormData(event.target)
  });

  const result = deserialize(await response.text());
  // ...
}

ts
function deserialize<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	result: string
): import('@sveltejs/kit').ActionResult<Success, Failure>;

enhancepermalink

This action enhances a <form> element that otherwise would work without JavaScript.

The submit function is 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.

ts
function enhance<
	Success extends Record<string, unknown> | undefined,
	Failure extends Record<string, unknown> | undefined
>(
	form_element: HTMLFormElement,
	submit?: import('@sveltejs/kit').SubmitFunction<
		Success,
		Failure
	>
): {
	destroy(): void;
};

ts
import {
	afterNavigate,
	beforeNavigate,
	disableScrollHandling,
	goto,
	invalidate,
	invalidateAll,
	onNavigate,
	preloadCode,
	preloadData
} from '$app/navigation';

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
const afterNavigate: (
	callback: (
		navigation: import('@sveltejs/kit').AfterNavigate
	) => void
) => void;

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
const beforeNavigate: (
	callback: (
		navigation: import('@sveltejs/kit').BeforeNavigate
	) => void
) => void;

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
const disableScrollHandling: () => void;

Returns a Promise that resolves when SvelteKit navigates (or fails to navigate, in which case the promise rejects) to the specified url. For external URLs, use window.location = url instead of calling goto(url).

ts
const goto: (
	url: string | URL,
	opts?: {
		replaceState?: boolean;
		noScroll?: boolean;
		keepFocus?: boolean;
		invalidateAll?: boolean;
		state?: any;
	}
) => Promise<void>;

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 parameters
import { invalidate } from '$app/navigation';

invalidate((url) => url.pathname === '/path');

ts
const invalidate: (
	url: string | URL | ((url: URL) => boolean)
) => Promise<void>;

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
const invalidateAll: () => Promise<void>;

A lifecycle function that runs the supplied callback immediately before we navigate to a new URL.

If you return a Promise, SvelteKit will wait for it to resolve before completing the navigation. This allows you to — for example — use document.startViewTransition. Avoid promises that are slow to resolve, since navigation will appear stalled to the user.

If a function (or a Promise that resolves to a function) is returned from the callback, it will be called once the DOM has updated.

onNavigate must be called during a component initialization. It remains active as long as the component is mounted.

ts
const onNavigate: (
	callback: (
		navigation: import('@sveltejs/kit').OnNavigate
	) => MaybePromise<(() => void) | void>
) => void;

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
const preloadCode: (...urls: string[]) => Promise<void>;

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
const 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' during vite dev or vite preview, since the assets don't yet live at their eventual URL.

ts
let assets:
	| ''
	| `https://${string}`
	| `http://${string}`
	| '/_svelte_kit_assets';

basepermalink

A string that matches config.kit.paths.base.

Example usage: <a href="{base}/your-page">Link</a>

ts
let base: '' | `/${string}`;

$app/storespermalink

ts
import { getStores, navigating, page, updated } from '$app/stores';

getStorespermalink

ts
function getStores(): {
	page: typeof page;

	navigating: typeof navigating;

	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.

On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.

ts
const navigating: import('svelte/store').Readable<
	import('@sveltejs/kit').Navigation | null
>;

pagepermalink

A readable store whose value contains page data.

On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.

ts
const page: import('svelte/store').Readable<
	import('@sveltejs/kit').Page
>;

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.

On the server, this store can only be subscribed to during component initialization. In the browser, it can be subscribed to at any time.

ts
const updated: import('svelte/store').Readable<boolean> & {
	check(): Promise<boolean>;
};

$env/dynamic/privatepermalink

このモジュールは、実行中のプラットフォームで定義された、実行時の環境変数へのアクセスを提供します。例えば、adapter-node を使用している場合 (または vite preview を実行中の場合)、これは process.env と同じです。このモジュールには、変数名が config.kit.env.publicPrefix で始まらない、かつ、config.kit.env.privatePrefix で始まる変数のみを含んでいます (設定されている場合に限る)。

このモジュールをクライアントサイドコードにインポートすることはできません。

ts
import { env } from '$env/dynamic/private';
console.log(env.DEPLOYMENT_SPECIFIC_VARIABLE);

開発中(In dev)は、$env/dynamic には常に .env からの環境変数が含まれます。本番(In prod)では、この動作は使用する adapter に依存します。

$env/dynamic/publicpermalink

$env/dynamic/private と似ていますが、config.kit.env.publicPrefix (デフォルトは PUBLIC_) で始まる変数のみを含んでおり、クライアントサイドのコードに安全に公開することができます。

パブリックで動的な環境変数は全て、サーバーからクライアントに送られるため、より大きなネットワークリクエストを引き起こすことにご注意ください。可能であれば、代わりに $env/static/public をお使いください。

ts
import { env } from '$env/dynamic/public';
console.log(env.PUBLIC_DEPLOYMENT_SPECIFIC_VARIABLE);

$env/static/privatepermalink

.env ファイルや process.env から Vite が読み込む環境変数です。$env/dynamic/private と同様に、このモジュールはクライアントサイドコードにインポートすることはできません。このモジュールには、変数名が config.kit.env.publicPrefix で始まらない、かつ、config.kit.env.privatePrefix で始まる変数のみを含んでいます (設定されている場合に限る)。

$env/dynamic/private とは 異なり 、このモジュールからエクスポートされた値はビルド時に静的に注入され、デッドコードの排除などの最適化が可能になります。

ts
import { API_KEY } from '$env/static/private';

コード内で参照される環境変数は、たとえアプリがデプロイされるまで値を持たない場合でも、すべて (例えば .env ファイルで) 宣言する必要があることに注意してください。:

MY_FEATURE_FLAG=""

このように、コマンドラインから .env の値を上書きすることができます:

MY_FEATURE_FLAG="enabled" npm run dev

$env/static/publicpermalink

$env/static/private と似ていますが、config.kit.env.publicPrefix (デフォルトは PUBLIC_) で始まる変数のみを含んでおり、クライアントサイドのコードに安全に公開することができます。

値はビルド時に静的に置き換えられます。

ts
import { PUBLIC_BASE_URL } from '$env/static/public';

$libpermalink

これは src/lib (または config.kit.files.lib に指定されたディレクトリ) へのシンプルなエイリアスです。../../../../ のようなナンセンスなことをせずに、共通のコンポーネントやユーティリティモジュールにアクセスすることができます。

$lib/serverpermalink

$lib のサブディレクトリです。SvelteKit は、クライアントサイドコードに $lib/server のモジュールがインポートされるのを防ぎます。server-only modules をご参照ください。

$service-workerpermalink

ts
import { base, build, files, prerendered, version } from '$service-worker';

This module is only available to service workers.

basepermalink

The base path of the deployment. Typically this is equivalent to config.kit.paths.base, but it is calculated from location.pathname meaning that it will continue to work correctly if the site is deployed to a subdirectory. Note that there is a base but no assets, since service workers cannot be used if config.kit.paths.assets is specified.

ts
const base: string;

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 {
	VERSION,
	error,
	fail,
	json,
	redirect,
	resolvePath,
	text
} from '@sveltejs/kit';

VERSIONpermalink

ts
const VERSION: string;

errorpermalink

ts
function error(
	status: number,
	body: App.Error
): HttpError_1;

errorpermalink

ts
function error(
	status: number,
	body?: {
		message: string;
	} extends App.Error
		? App.Error | string | undefined
		: never
): HttpError_1;

failpermalink

Create an ActionFailure object.

ts
function fail<
	T extends Record<string, unknown> | undefined = undefined
>(status: number, data?: T | undefined): ActionFailure<T>;

jsonpermalink

Create a JSON Response object from the supplied data.

ts
function json(
	data: any,
	init?: ResponseInit | undefined
): 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 would prevent SvelteKit from handling it.

ts
function redirect(
	status:
		| 300
		| 301
		| 302
		| 303
		| 304
		| 305
		| 306
		| 307
		| 308,
	location: string | URL
): Redirect_1;

resolvePathpermalink

Populate a route ID with params to resolve a pathname.

ts
function resolvePath(
	id: string,
	params: Record<string, string | undefined>
): string;

textpermalink

Create a Response object from the supplied body.

ts
function text(
	body: string,
	init?: ResponseInit | undefined
): 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. The behavior for the handle options is as follows:

transformPageChunk is applied in reverse order and merged
preload is applied in forward order, the first option "wins" and no preload options after it are called
filterSerializedResponseHeaders behaves the same as preload

src/hooks.server.js

ts
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
		}
	});
	console.log('first post-processing');
	return result;
Binding element 'event' implicitly has an 'any' type.
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.}

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
		   console.log('second filterSerializedResponseHeaders');
		}
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

src/hooks.server.ts

ts
import { sequence } from '@sveltejs/kit/hooks';

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function first({ event, resolve }) {
	console.log('first pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			// transforms are applied in reverse order
			console.log('first transform');
			return html;
		},
		preload: () => {
			// this one wins as it's the first defined in the chain
			console.log('first preload');
		},
	});
	console.log('first post-processing');
	return result;
Binding element 'event' implicitly has an 'any' type.
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.}

/// type: import('@sveltejs/kit').Handle
Binding element 'html' implicitly has an 'any' type.7031Binding element 'html' implicitly has an 'any' type.async function second({ event, resolve }) {
	console.log('second pre-processing');
	const result = await resolve(event, {
		transformPageChunk: ({ html }) => {
			console.log('second transform');
			return html;
		},
		preload: () => {
			console.log('second preload');
		},
		filterSerializedResponseHeaders: () => {
			// this one wins as it's the first defined in the chain
			console.log('second filterSerializedResponseHeaders');
		},
	});
	console.log('second post-processing');
	return result;
}

export const handle = sequence(first, second);

The example above would print:

first pre-processing
first preload
second pre-processing
second filterSerializedResponseHeaders
second transform
first transform
second post-processing
first post-processing

ts
function sequence(
	...handlers: import('@sveltejs/kit').Handle[]
): import('@sveltejs/kit').Handle;

@sveltejs/kit/nodepermalink

ts
import { getRequest, setResponse } from '@sveltejs/kit/node';

getRequestpermalink

ts
function getRequest({
	request,
	base,
	bodySizeLimit
}: {
	request: import('http').IncomingMessage;
	base: string;
	bodySizeLimit?: number;
}): Promise<Request>;

setResponsepermalink

ts
function setResponse(
	res: import('http').ServerResponse,
	response: Response
): Promise<void>;

@sveltejs/kit/node/polyfillspermalink

ts
import { installPolyfills } from '@sveltejs/kit/node/polyfills';

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<import('vite').Plugin[]>;

previous Command Line Interface

next Types

Modules

$app/environmentpermalink

browserpermalink

devpermalink

buildingpermalink

versionpermalink

$app/formspermalink

applyActionpermalink

deserializepermalink

enhancepermalink

$app/navigationpermalink

afterNavigatepermalink

beforeNavigatepermalink

disableScrollHandlingpermalink

gotopermalink

invalidatepermalink

invalidateAllpermalink

onNavigatepermalink

preloadCodepermalink

preloadDatapermalink

$app/pathspermalink

assetspermalink

basepermalink

$app/storespermalink

getStorespermalink

navigatingpermalink

pagepermalink

updatedpermalink

$env/dynamic/privatepermalink

$env/dynamic/publicpermalink

$env/static/privatepermalink

$env/static/publicpermalink

$libpermalink

$lib/serverpermalink

$service-workerpermalink

basepermalink

buildpermalink

filespermalink

prerenderedpermalink

versionpermalink

@sveltejs/kitpermalink

VERSIONpermalink

errorpermalink

errorpermalink

failpermalink

jsonpermalink

redirectpermalink

resolvePathpermalink

textpermalink

@sveltejs/kit/hookspermalink

sequencepermalink

@sveltejs/kit/nodepermalink

getRequestpermalink

setResponsepermalink

@sveltejs/kit/node/polyfillspermalink

installPolyfillspermalink

@sveltejs/kit/vitepermalink

sveltekitpermalink