[SOLVED] Access URL query string in svelte

Access URL query string in svelte

How should I access the the query string parameters from svelte? I'd like my script to behave differently when "?beta" has been appended to the URL.

My intuitive approach would be to use the standard URLSearchParams in a svelte #if block.

Solution

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.