SvelteKit • Reference

$app/paths

On this page
import {
	function asset(file: Asset): string

Resolve the URL of an asset in your static directory, by prefixing it with config.kit.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```svelte <script> import { asset } from '$app/paths'; </script> <img alt="a potato" src={asset('/potato.jpg')} /> ```@since2.26
function asset(file: Asset): string

Resolve the URL of an asset in your static directory, by prefixing it with config.kit.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```svelte <script> import { asset } from '$app/paths'; </script> <img alt="a potato" src={asset('/potato.jpg')} /> ```@since2.26
asset
,
let assets: "" | `https://${string}` | `http://${string}` | "/_svelte_kit_assets"

An absolute path that matches config.kit.paths.assets.

[!NOTE] 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.

@deprecatedUse [`asset(...)`](https://svelte.dev/docs/kit/$app-paths#asset) instead
let assets: "" | `https://${string}` | `http://${string}` | "/_svelte_kit_assets"

An absolute path that matches config.kit.paths.assets.

[!NOTE] 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.

@deprecatedUse [`asset(...)`](https://svelte.dev/docs/kit/$app-paths#asset) instead
assets
,
let base: "" | `/${string}`

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

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

@deprecatedUse [`resolve(...)`](https://svelte.dev/docs/kit/$app-paths#resolve) instead
let base: "" | `/${string}`

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

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

@deprecatedUse [`resolve(...)`](https://svelte.dev/docs/kit/$app-paths#resolve) instead
base
,
function match(url: Pathname | URL | (string & {})): Promise<{
    id: RouteId;
    params: Record<string, string>;
} | null>

Match a path or URL to a route ID and extracts any parameters.

@example```js import { match } from '$app/paths'; const route = await match('/blog/hello-world'); if (route?.id === '/blog/[slug]') { const slug = route.params.slug; const response = await fetch(`/api/posts/${slug}`); const post = await response.json(); } ```@since2.52.0
function match(url: Pathname | URL | (string & {})): Promise<{
    id: RouteId;
    params: Record<string, string>;
} | null>

Match a path or URL to a route ID and extracts any parameters.

@example```js import { match } from '$app/paths'; const route = await match('/blog/hello-world'); if (route?.id === '/blog/[slug]') { const slug = route.params.slug; const response = await fetch(`/api/posts/${slug}`); const post = await response.json(); } ```@since2.52.0
match
,
function resolve<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): 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```js 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' }); ```@since2.26
function resolve<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): 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```js 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' }); ```@since2.26
resolve
,
function resolveRoute<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathname
@deprecatedUse [`resolve(...)`](https://svelte.dev/docs/kit/$app-paths#resolve) instead
function resolveRoute<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathname
@deprecatedUse [`resolve(...)`](https://svelte.dev/docs/kit/$app-paths#resolve) instead
resolveRoute
} from '$app/paths';

base

Use resolve(...) instead

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

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

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

assets

Use asset(...) instead

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.

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

resolveRoute

Use resolve(...) instead

export function resolveRoute<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(
		...args: ResolveArgs<T>
	): ResolvedPathname;

asset

Available since 2.26

Resolve the URL of an asset in your static directory, by prefixing it with config.kit.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.

export function asset(file: Asset): string;

resolve

Available since 2.26

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.

export function resolve<T extends RouteIdWithSearchOrHash | PathnameWithSearchOrHash>(...args: ResolveArgs<T>): ResolvedPathname;

match

Available since 2.52.0

Match a path or URL to a route ID and extracts any parameters.

export function match(url: Pathname | URL | (string & {})): Promise<{
		id: RouteId;
		params: Record<string, string>;
	} | null>;