How to Get Query String Parameter in SvelteKit?

In this article, we will explore how to retrieve query string parameters in SvelteKit applications. Query parameters are often used to pass data in URLs, such as user preferences or search queries. Understanding how to access these parameters is crucial for building dynamic web applications.

These are the following approaches to get query string parameters in sveltekit:

Steps to Create the Application

Step 1: Set up a new SvelteKit project

npm create svelte@latest my-sveltekit-app
cd my-sveltekit-app
npm install

Step 2 Create a new route:

• Create a directory and file in the src/routes directory named your-route/+page.svelte, +page.js file.
• In my case, it is as src/routes/geeksforgeeks/+page.svelte, src/routes/geeksforgeeks/+page.js.

Project Structure:

Updated Dependencies:

{
	"name": "my-sveltekit-app",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
	},
	"devDependencies": {
		"@fontsource/fira-mono": "^5.0.0",
		"@neoconfetti/svelte": "^2.0.0",
		"@sveltejs/adapter-auto": "^3.0.0",
		"@sveltejs/kit": "^2.0.0",
		"@sveltejs/vite-plugin-svelte": "^3.0.0",
		"svelte": "^4.2.7",
		"svelte-check": "^4.0.0",
		"typescript": "^5.0.0",
		"vite": "^5.0.3"
	},
	"type": "module"
}

Using the $page store

SvelteKit provides a $page store that contains the current page's information, including query parameters.

Syntax:

import { page } from '$app/stores';
$page.url.searchParams.get('param');

Example: This example shows the use of the $page store to get query string parameter in sveltekit.

// src/routes/geeksforgeeks/+page.svelte
<script>
  import { page } from '$app/stores';

  let queryParam;

  // SvelteKit's $page store holds the URL,
  // So you can reactively get query parameters.
  $: queryParam = $page.url.searchParams.get('param');
</script>

<h1>Query Parameter: {queryParam}</h1>

Start the development server:

npm run dev

Note: Paste this to your searbar on the browser and you will get the output. you can change "param = anything" to reflect the changes.

http://localhost:5174/geeksforgeeks?param=this%20is%20first%20paproach

Output:

Using the URL API

You can directly access the URL and its parameters using the native URL API.

Syntax:

const queryParam = new URL(window.location.href).searchParams.get('param');

Example: This example shows the use of the URL API to get query string parameter in sveltekit.

File: src/routes/geeksforgeeks/+page.svelte

<script>
  import { onMount } from "svelte";

    /**
   * @type {string | null}
   */
    let queryParam;

    onMount(() => {
        queryParam = new URL(window.location.href).searchParams.get('param');
    });
</script>

<p>Query Parameter: {queryParam}</p>

Start the development server:

npm run dev

Note: Paste this to your searbar on the browser and you will get the output. you can change "param = anything" to reflect the changes.

http://localhost:5174/geeksforgeeks?param=this%20is%20the%20value%20of%20parameter

Output:

Conclusion

In this article, we discussed three approaches to retrieve query string parameters in SvelteKit: using the $page store, the load function, and the native URL API. Each method has its own use cases, and you can choose the one that best fits your application's needs. By effectively managing query parameters, you can enhance the interactivity and user experience of your SvelteKit applications.