Basic Svelte
Introduction
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
The updated
state contains true
or false
depending on whether a new version of the app has been deployed since the page was first opened. For this to work, your svelte.config.js
must specify kit.version.pollInterval
.
src/routes/+layout
<script> import { page, navigating, updated } from '$app/state'; </script>
<script lang="ts"> import { page, navigating, updated } from '$app/state'; </script>
Version changes only happen in production, not during development. For that reason, updated.current
will always be false
in this tutorial.
You can manually check for new versions, regardless of pollInterval
, by calling updated.check()
.
src/routes/+layout
{#if updated.current} <div class="toast"> <p> A new version of the app is available <button onclick={() => location.reload()}> reload the page </button> </p> </div> {/if}
Prior to SvelteKit 2.12, you had to use
$app/stores
for this, which provides an$updated
store with the same information. If you’re currently using$app/stores
, we advise you to migrate towards$app/state
(requires Svelte 5).
previous next
1
2
3
<h1>home</h1>
<p>this is the home page.</p>