vercel · feugy · Jul 3, 2026 · Jul 2, 2026 · Jul 2, 2026 · Jul 2, 2026
diff --git a/apps/sveltekit-old/.gitignore b/apps/sveltekit-old/.gitignore
@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vercel
diff --git a/apps/sveltekit-old/.npmrc b/apps/sveltekit-old/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/apps/sveltekit-old/README.md b/apps/sveltekit-old/README.md
@@ -0,0 +1,17 @@
+# SvelteKit 2 Demo application for Vercel Speed Insights
+
+## Setup
+
+This application was created with the following commands:
+
+- `cd apps`
+- `pnpm create svelte@latest sveltekit-old` (answers: Skeleton project, JavaScript with JSDoc, no additional option)
+- `cd sveltekit-old`
+- add `src/+layout.js` to include `import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit'; injectSpeedInsights();`
+- edit package.json to add `"@vercel/speed-insights": "workspace:*"` dependency and change `@sveltejs/adapter-auto` into `@sveltejs/adapter-vercel`
+- edit `svelte.config.js` to change `@sveltejs/adapter-auto` into `@sveltejs/adapter-vercel`
+- `pnpm i`
+
+## Usage
+
+Start it with `pnpm -F sveltekit-old dev` and browse to [http://localhost:5173](http://localhost:5173)
diff --git a/apps/sveltekit-old/jsconfig.json b/apps/sveltekit-old/jsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
+}
diff --git a/apps/sveltekit-old/package.json b/apps/sveltekit-old/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "sveltekit-old",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "dev": "vite dev",
+    "prepare": "svelte-kit sync",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-vercel": "^6.2",
+    "@sveltejs/kit": "^2.49",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@vercel/speed-insights": "workspace:*",
+    "svelte": "^5",
+    "svelte-check": "^4",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
+  }
+}
diff --git a/apps/sveltekit-old/src/app.d.ts b/apps/sveltekit-old/src/app.d.ts
@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {};
diff --git a/apps/sveltekit-old/src/app.html b/apps/sveltekit-old/src/app.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/apps/sveltekit-old/src/routes/+layout.js b/apps/sveltekit-old/src/routes/+layout.js
@@ -0,0 +1,3 @@
+import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
+
+injectSpeedInsights();
diff --git a/apps/sveltekit-old/src/routes/+page.svelte b/apps/sveltekit-old/src/routes/+page.svelte
@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="/bruno">this page</a> to know more...</p>
diff --git a/apps/sveltekit-old/src/routes/[slug]/+page.svelte b/apps/sveltekit-old/src/routes/[slug]/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+import { page } from '$app/stores';
+</script>
+
+<h1>We don't talk about {$page.params.slug}</h1>
+
+<a href="/">Go back</a>
diff --git a/apps/sveltekit-old/static/favicon.png b/apps/sveltekit-old/static/favicon.png
diff --git a/apps/sveltekit/svelte.config.js → apps/sveltekit-old/svelte.config.js b/apps/sveltekit/svelte.config.js → apps/sveltekit-old/svelte.config.js
diff --git a/apps/sveltekit-old/vite.config.js b/apps/sveltekit-old/vite.config.js
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});
diff --git a/apps/sveltekit/README.md b/apps/sveltekit/README.md
@@ -1,4 +1,4 @@
-# Sveltekit Demo application for Vercel Speed-insights
+# SvelteKit 3 Demo application for Vercel Speed Insights
 
 ## Setup
 
@@ -7,11 +7,10 @@ This application was created with the following commands:
 - `cd apps`
 - `pnpm create svelte@latest sveltekit` (answers: Skeleton project, JavaScript with JSDoc, no additional option)
 - `cd sveltekit`
-- add `src/+layout.js` to include `import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit'; injectSpeedInsights();`
+- add `src/+layout.js` to include `import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit-next'; injectSpeedInsights();`
 - edit package.json to add `"@vercel/speed-insights": "workspace:*"` dependency and change `@sveltejs/adapter-auto` into `@sveltejs/adapter-vercel`
-- eddi `svelte.config.js` to change `@sveltejs/adapter-auto` into `@sveltejs/adapter-vercel`
 - `pnpm i`
 
 ## Usage
 
-Start it with `cd apps/sveltekit` + `pnpm dev` and browse to [http://localhost:5173](http://localhost:5173)
+Start it with `pnpm -F sveltekit dev` and browse to [http://localhost:5173](http://localhost:5173)
diff --git a/apps/sveltekit/package.json b/apps/sveltekit/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "svelte",
+  "name": "sveltekit",
   "version": "0.0.1",
   "private": true,
   "type": "module",
@@ -12,13 +12,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^6.2",
-    "@sveltejs/kit": "^2.49",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/adapter-vercel": "^7.0.0-next.0",
+    "@sveltejs/kit": "^3.0.0-next.5",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@vercel/speed-insights": "workspace:*",
-    "svelte": "^5",
+    "svelte": "^5.56.3",
     "svelte-check": "^4",
-    "typescript": "^5.5.0",
-    "vite": "^5.4.4"
+    "typescript": "^6",
+    "vite": "^8.0.12"
   }
 }
diff --git a/apps/sveltekit/src/routes/+layout.js b/apps/sveltekit/src/routes/+layout.js
@@ -1,3 +1,3 @@
-import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';
+import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit-next';
 
 injectSpeedInsights();
diff --git a/apps/sveltekit/src/routes/[slug]/+page.svelte b/apps/sveltekit/src/routes/[slug]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
-import { page } from '$app/stores';
+import { page } from '$app/state';
 </script>
 
-<h1>We don't talk about {$page.params.slug}</h1>
+<h1>We don't talk about {page.params.slug}</h1>
 
 <a href="/">Go back</a>
diff --git a/apps/sveltekit/vite.config.js b/apps/sveltekit/vite.config.js
@@ -1,6 +1,11 @@
+import adapter from '@sveltejs/adapter-vercel';
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [
+    sveltekit({
+      adapter: adapter(),
+    }),
+  ],
 });
diff --git a/packages/web/README.md b/packages/web/README.md
@@ -19,15 +19,16 @@ This package does **not** track data in development mode.
 
 It has 1st class integration with:
 
-| Framework | Package                            |
-| --------- | ---------------------------------- |
-| Next.js   | `@vercel/speed-insights/next`      |
-| Nuxt      | `@vercel/speed-insights/nuxt`      |
-| Sveltekit | `@vercel/speed-insights/sveltekit` |
-| Remix     | `@vercel/speed-insights/remix`     |
-| React     | `@vercel/speed-insights/react`     |
-| Astro     | `@vercel/speed-insights/astro`     |
-| Vue       | `@vercel/speed-insights/vue`       |
+| Framework   | Package                                   |
+| ----------- | ----------------------------------------- |
+| Next.js     | `@vercel/speed-insights/next`             |
+| Nuxt        | `@vercel/speed-insights/nuxt`             |
+| SvelteKit   | `@vercel/speed-insights/sveltekit`        |
+| SvelteKit 3 | `@vercel/speed-insights/sveltekit-next`  |
+| Remix       | `@vercel/speed-insights/remix`            |
+| React       | `@vercel/speed-insights/react`            |
+| Astro       | `@vercel/speed-insights/astro`            |
+| Vue         | `@vercel/speed-insights/vue`              |
 
 It also supports other frameworks, vanilla JS and static websites.
 
@@ -38,7 +39,8 @@ It also supports other frameworks, vanilla JS and static websites.
 3. Inject Speed Insights to your app
 
    - If you are using **Next.js**, **React**, **Nuxt** or **Vue** you can use the framework-specific `<SpeedInsights />` component to inject the script into your app.
-   - If you are using **Sveltekit**, you can use the `injectSpeedInsights()` function `@vercel/speed-insights/sveltekit` in your top-level `+layout.js/ts` file.
+   - If you are using **SvelteKit 2**, you can use the `injectSpeedInsights()` function from `@vercel/speed-insights/sveltekit` in your top-level `+layout.js/ts` file.
+   - If you are using **SvelteKit 3**, import `injectSpeedInsights()` from `@vercel/speed-insights/sveltekit-next` instead.
    - For other frameworks, you can use the `inject` function add the tracking script to your app.
    - If you want to use Vercel Speed Insights on a static site without npm, follow the instructions in the [documentation](https://vercel.com/docs/speed-insights/quickstart).
 

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vercel/speed-insights",
-  "version": "2.0.1-canary",
+  "version": "2.1.0-canary",
   "description": "Speed Insights is a tool for measuring web performance and providing suggestions for improvement.",
   "keywords": [
     "speed-insights",
@@ -52,6 +52,10 @@
       "types": "./dist/sveltekit/index.d.ts",
       "svelte": "./dist/sveltekit/index.mjs"
     },
+    "./sveltekit-next": {
+      "types": "./dist/sveltekit-next/index.d.mts",
+      "svelte": "./dist/sveltekit-next/index.svelte.js"
+    },
     "./vue": {
       "browser": "./dist/vue/index.mjs",
       "import": "./dist/vue/index.mjs",
@@ -83,22 +87,26 @@
       "sveltekit": [
         "dist/sveltekit/index.d.ts"
       ],
+      "sveltekit-next": [
+        "dist/sveltekit-next/index.d.mts"
+      ],
       "vue": [
         "dist/vue/index.d.ts"
       ]
     }
   },
   "scripts": {
-    "build": "tsup && pnpm copy-astro",
+    "build": "tsup && pnpm copy-astro && pnpm copy-sveltekit-next-package",
     "copy-astro": "cp -R src/astro dist/",
-    "dev": "pnpm copy-astro && tsup --watch",
+    "copy-sveltekit-next-package": "mkdir -p dist/sveltekit-next && cp src/sveltekit-next/package.json dist/sveltekit-next/package.json",
+    "dev": "pnpm copy-astro && pnpm copy-sveltekit-next-package && tsup --watch",
     "test": "vitest"
   },
   "devDependencies": {
     "@nuxt/kit": "^4.2.0",
     "@nuxt/schema": "^4.2.0",
     "@remix-run/react": "^2.14.0",
-    "@sveltejs/kit": "^2.8.1",
+    "@sveltejs/kit": "^3.0.0-next.0",
     "@swc/core": "^1.9.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
@@ -116,7 +124,7 @@
     "vue-router": "^4.4.5"
   },
   "peerDependencies": {
-    "@sveltejs/kit": "^1 || ^2",
+    "@sveltejs/kit": "^1 || ^2 || ^3 || ^3.0.0-next.0",
     "next": ">= 13",
     "nuxt": ">= 3",
     "react": "^18 || ^19 || ^19.0.0-rc",

diff --git a/packages/web/src/sveltekit-next/index.ts b/packages/web/src/sveltekit-next/index.ts
@@ -0,0 +1,40 @@
+import type {} from '@sveltejs/kit'; // don't remove, ensures ambient types for $app/* are loaded
+import { page } from '$app/state';
+import { injectSpeedInsights as inject } from '../generic';
+import type { BeforeSend, BeforeSendEvent, SpeedInsightsProps } from '../types';
+import { getBasePath, getConfigString } from './utils';
+
+/**
+ * Injects Vercel Speed Insights in SvelteKit 3 apps.
+ */
+export function injectSpeedInsights(
+  props: Omit<SpeedInsightsProps, 'framework'> = {},
+): void {
+  let speedInsights: ReturnType<typeof inject> = null;
+
+  $effect.root(() => {
+    $effect.pre(() => {
+      const route = page.route?.id;
+
+      if (!route) {
+        return;
+      }
+
+      if (!speedInsights) {
+        speedInsights = inject(
+          {
+            ...props,
+            route,
+            framework: 'sveltekit',
+            basePath: getBasePath(),
+          },
+          getConfigString(),
+        );
+        return;
+      }
+
+      speedInsights.setRoute(route);
+    });
+  });
+}
+export type { SpeedInsightsProps, BeforeSend, BeforeSendEvent };
diff --git a/packages/web/src/sveltekit-next/package.json b/packages/web/src/sveltekit-next/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/web/src/sveltekit-next/utils.test.ts b/packages/web/src/sveltekit-next/utils.test.ts
@@ -0,0 +1,27 @@
+import { afterEach, describe, expect, it } from 'vitest';
+import { getBasePath, getConfigString } from './utils';
+
+afterEach(() => {
+  delete import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH;
+  delete import.meta.env.VITE_VERCEL_OBSERVABILITY_CLIENT_CONFIG;
+});
+
+describe('getBasePath()', () => {
+  it('returns basepath set for Sveltekit', () => {
+    const basepath = `/_vercel-${Math.random()}/insights`;
+    import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH = basepath;
+    expect(getBasePath()).toBe(basepath);
+  });
+});
+
+describe('getConfigString()', () => {
+  it('returns configuration string for SvelteKit', () => {
+    const config = JSON.stringify({
+      speedInsights: {
+        endpoint: `/_vercel-${Math.random()}`,
+      },
+    });
+    import.meta.env.VITE_VERCEL_OBSERVABILITY_CLIENT_CONFIG = config;
+    expect(getConfigString()).toBe(config);
+  });
+});
diff --git a/packages/web/src/sveltekit-next/utils.ts b/packages/web/src/sveltekit-next/utils.ts
@@ -0,0 +1,23 @@
+// !! important !!
+// do not access env variables using import.meta.env[varname]
+// some bundlers won't replace the value at build time.
+
+export function getBasePath(): string | undefined {
+  try {
+    return import.meta.env.VITE_VERCEL_OBSERVABILITY_BASEPATH as
+      | string
+      | undefined;
+  } catch {
+    // do nothing
+  }
+}
+
+export function getConfigString(): string | undefined {
+  try {
+    return import.meta.env.VITE_VERCEL_OBSERVABILITY_CLIENT_CONFIG as
+      | string
+      | undefined;
+  } catch {
+    // do nothing
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { injectSpeedInsights } from '@vercel/speed-insights/sveltekit';

		injectSpeedInsights();
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<h1>Welcome to SvelteKit</h1>
		<p>Visit <a href="/bruno">this page</a> to know more...</p>