Route Metadata

You can attach arbitrary data to routes using the meta property. This is useful for authentication guards, UI configuration, analytics tracking, and more.

routes
└── about
   ├── index.svelte
   └── meta.ts

meta.ts

import type { RouteMeta } from 'sv-router';

export default {
	public: false,
} satisfies RouteMeta;

NOTE

When routes are nested, metadata from parent routes is merged with child route metadata:

routes
└── dashboard
   ├── index.svelte
   └── meta.ts                  ➜ { section: 'app', requiresAuth: true }
      ├── index.svelte
      └── meta.ts               ➜ { public: false }

The /dashboard/settings route will have metadata: { section: 'app', requiresAuth: true, subsection: 'preferences' }.

Accessing Metadata

You can access route metadata in your components using the route object:

Protected.svelte

<script lang="ts">
	import { route } from '../router';

	$effect(() => {
		console.log('Route is public:', route.meta.public);
	});
</script>

Resolving Metadata for a Path

The route object only exposes the metadata of the current route. To read the merged metadata of any route without navigating to it, use resolveMeta:

menu.ts

import { resolveMeta } from 'sv-router/generated';

const items = [
	{ label: 'Dashboard', path: '/dashboard' },
	{ label: 'Settings', path: '/dashboard/settings' },
] as const;

const allowed = items.filter((item) => resolveMeta(item.path).requiresAuth !== true);

Like the route.meta getter, resolveMeta merges metadata from all ancestor route levels. It returns an empty object for a route that has no metadata.

Typing Metadata

By default, metadata is typed as Record<string, any>. You can customize this for better type safety:

declare module 'sv-router' {
	interface RouteMeta {
		public?: boolean;
		requiresAuth?: boolean;
		section?: string;
	}
}