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
,
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.

@examplejs 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 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';

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;

match

Available since 2.52.0

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

import { 
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.

@examplejs 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
} from '$app/paths';
const
const route: {
    id: RouteId;
    params: Record<string, string>;
} | null
route
= await
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.

@examplejs 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
('/blog/hello-world');
if (
const route: {
    id: RouteId;
    params: Record<string, string>;
} | null
route
?.id: string | undefinedid === '/blog/[slug]') {
const const slug: stringslug =
const route: {
    id: RouteId;
    params: Record<string, string>;
}
route
.params: Record<string, string>params.stringslug;
const const response: Responseresponse = await function fetch(input: string | URL | Request, init?: RequestInit): Promise<Response> (+1 overload)fetch(`/api/posts/${const slug: stringslug}`); const const post: anypost = await const response: Responseresponse.Body.json(): Promise<any>json(); }
function match(
	url: Pathname_1 | URL | (string & {})
): Promise<{
	id: RouteId;
	params: Record<string, string>;
} | null>;

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: stringresolved = resolve<"/blog/hello-world">(route: "/blog/hello-world", params: Record<string, string>): 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: stringresolved = resolve<"/blog/[slug]">(route: "/blog/[slug]", params: Record<string, string>): 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
		| RouteIdWithSearchOrHash
		| PathnameWithSearchOrHash
>(...args: ResolveArgs<T>): ResolvedPathname;
Legacy mode

base, assets, and resolveRoute were removed in 3.0

Edit this page on GitHub llms.txt