Skip to main content

TODO link to stores exercise

As we learned earlier, Svelte stores are a place to put data that doesn’t belong to an individual component.

SvelteKit makes three readonly stores available via the $app/stores module — page, navigating and updated. The one you’ll use most often is page, which provides information about the current page:

  • url — the URL of the current page
  • params — the current page’s parameters
  • route — an object with an id property representing the current route
  • status — the HTTP status code of the current page
  • error — the error object of the current page, if any (you’ll learn more about error handling in later exercises)
  • data — the data for the current page, combining the return values of all load functions
  • form — the data returned from a form action

As with any other store, you can reference its value in a component by prefixing its name with the $ symbol. For example, we can access the current pathname as $page.url.pathname:

src/routes/+layout
<script>
	import { page } from '$app/stores';

	let { children } = $props();
</script>

<nav>
	<a href="/" aria-current={$page.url.pathname === '/'}>
		home
	</a>

	<a href="/about" aria-current={$page.url.pathname === '/about'}>
		about
	</a>
</nav>

{@render children()}

Edit this page on GitHub

1
2
3
<h1>home</h1>
<p>this is the home page.</p>