Access URL query string in svelte

Question

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.

Bronchial

$page.url.searchParams.get('xxx') to get a url query param. – Mathew

Answer 1

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.

Pleopod

Cannot read properties of undefined (reading 'searchParams') when i use it – Heuser

Answer 2

Here's how you do it with in SvelteKit:

<script>
    import { page } from '$app/stores'
    const email = $page.url.searchParams.get('email')
</script>

Reproductive

$page.query has been replaced by $page.url.searchParams – Cuticula

how do you use this? – Heuser

import {page} from '$app/stores'; const id = $page.url.searchParams.get('id'); – Toback

Cannot read properties of undefined (reading 'searchParams') – Heuser

@Cuticula can you provide a link to this in the docs? I can't seem to find any reference to searchParams or the URL type that is attached to $page. – Reproductive

@Reproductive I can't find it in the docs either... but Geoff Rich's answer cites the this PR, which replaces (among other things) [query] with the url object. – Cuticula

The official SvelteKit docs for URL APIs is available here and agrees with this answer: kit.svelte.dev/docs/web-standards#url-apis const foo = url.searchParams.get('foo'); – Womanizer

Answer 3

For anyone specifically using SvelteKit, a Svelte framework, the page store lets you import a page object allowing you to access the parameters as page.query:

<script>
  import { page } from '$app/stores';
  let isBeta = page.query.beta;
</script>


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

Howler

You need the page.query.get("beta") for it to work – Virescent

this is deprecated – Heuser

Answer 4

As of June 2022:

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

Cuticula

Answer 5

In 2023 using SvelteKit,

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

{#if typeof beta === 'string'}
Beta is on!
{:else}
No beta :(
{/if}

Your life would be bit easier when you use ?beta=1 or any value that is considered true. In snippet above was needed to check if it is an (empty) string.

Elative

Answer 6

A little old, window is somewhat more involved with server side rendering as indicated here: I think this might be better:

<script>   
    import { page } from '$app/stores'
    let urlPrams = $page.query.get('beta')
    const isBeta = false
    if (urlPrams && urlPrams.length > 0) {
         const isBeta = true
    }
    
</script>

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

Spade