CODEWITHSUNDEEP
sveltequery-string
Anna
Anna

Reputation: 2845

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.

Upvotes: 43

Views: 64033

Answers (6)

thomallen
thomallen

Reputation: 2034

Here's how you do it with in SvelteKit:

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

Upvotes: 53

Michal S
Michal S

Reputation: 1554

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.

Upvotes: 4

lefrost
lefrost

Reputation: 581

As of June 2022:

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

Upvotes: 8

Geoff Rich
Geoff Rich

Reputation: 5472

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.

Upvotes: 66

Fergus
Fergus

Reputation: 2982

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}

Upvotes: 2

cybermelon
cybermelon

Reputation: 149

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}

Upvotes: 14

Related Questions