Skip to main content

$app/paths

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.

@examplesvelte <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.

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(...) instead
assets
, let base: "" | `/${string}`

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

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

@deprecatedUse resolve(...) instead
base
, function resolve<T extends RouteId | Pathname>(...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.

@examplejs 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 RouteId | Pathname>(...args: ResolveArgs<T>): ResolvedPathname
@deprecatedUse resolve(...) instead
resolveRoute
} from '$app/paths';

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.

<script>
	import { asset } from '$app/paths';
</script>

<img alt="a potato" src={asset('potato.jpg')} />
function asset(file: Asset): 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.

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

base

Use resolve(...) instead

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

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

let base: '' | `/${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.

import { function resolve<T extends RouteId | Pathname>(...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.

@examplejs 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
} from '$app/paths';
// using a pathname const const resolved: ResolvedPathnameresolved = resolve<string>(...args: [route: string] | [route: string, params: RouteParams<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.

@examplejs 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
(`/blog/hello-world`);
// using a route ID plus parameters const const resolved: ResolvedPathnameresolved = resolve<string>(...args: [route: string] | [route: string, params: RouteParams<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.

@examplejs 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
('/blog/[slug]', {
slug: stringslug: 'hello-world' });
function resolve<T extends RouteId | Pathname>(
	...args: ResolveArgs<T>
): ResolvedPathname;

resolveRoute

Use resolve(...) instead

function resolveRoute<T extends RouteId | Pathname>(
	...args: ResolveArgs<T>
): ResolvedPathname;

Edit this page on GitHub llms.txt