Access URL query string in svelte

by

Yep, you should be able to use URLSearchParams. In general, anything you can do in plain JS you can do in a Svelte script tag.

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const isBeta = urlParams.has('beta');
</script>

{#if isBeta}
    <p>This is beta!</p>
{:else}
    <p>This is not beta.</p>
{/if}

Edit: the above method will not work in SvelteKit, which enables server-side rendering by default. In SvelteKit, you should use the page store, which exposes a native URL object.

<script>
    import { page } from '$app/stores';
    
    const isBeta = $page.url.searchParams.has('beta');
</script>

This store was changed as recently as SvelteKit v1.0.0-next.208, so other answers referencing it may be out of date. In particular, $page.query is no longer available since it was replaced by $page.url.

Leave a Comment