vercel · feugy · Jul 6, 2026 · Jul 3, 2026 · Jul 3, 2026 · Jul 6, 2026
diff --git a/apps/sveltekit-old/.gitignore b/apps/sveltekit-old/.gitignore
@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
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 Web Analytics
+
+## Setup
+
+This application was created with the following commands:
+
+- `cd apps`
+- `pnpx sv create sveltekit` (answers: SvelteKit minimal, no Typescript, no additional install, pnpm)
+- `cd sveltekit`
+- add `src/+layout.js` to include `import { injectAnalytics } from '@vercel/analytics/sveltekit'; injectAnalytics();`
+- edit package.json to add `"@vercel/analytics": "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",
+    "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",
+    "@types/node": "^22.9.0",
+    "@vercel/analytics": "workspace:*",
+    "svelte": "^5",
+    "svelte-check": "^4",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
+  }
+}
diff --git a/apps/sveltekit-old/src/app.html b/apps/sveltekit-old/src/app.html
@@ -0,0 +1,12 @@
+<!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.ts b/apps/sveltekit-old/src/routes/+layout.ts
@@ -0,0 +1,13 @@
+import {
+  type BeforeSendEvent,
+  injectAnalytics,
+} from '@vercel/analytics/sveltekit';
+import { dev } from '$app/environment';
+
+injectAnalytics({
+  mode: dev ? 'development' : 'production',
+  beforeSend(event: BeforeSendEvent) {
+    console.log('beforeSend', event);
+    return event;
+  },
+});
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,10 @@
+<script>
+import { track } from '@vercel/analytics/sveltekit';
+import { page } from '$app/stores';
+</script>
+
+<h1>We don't talk about {$page.params.slug}</h1>
+
+<a href="/" onclick={() => track('go-back', { slug: $page.params.slug })}
+  >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 Web Analytics
+# SvelteKit 3 Demo application for Vercel Web Analytics
 
 ## Setup
 
@@ -7,9 +7,8 @@ This application was created with the following commands:
 - `cd apps`
 - `pnpx sv create sveltekit` (answers: SvelteKit minimal, no Typescript, no additional install, pnpm)
 - `cd sveltekit`
-- add `src/+layout.js` to include `import { injectAnalytics } from '@vercel/analytics/sveltekit'; injectAnalytics();`
+- add `src/+layout.js` to include `import { injectAnalytics } from '@vercel/analytics/sveltekit-next'; injectAnalytics();`
 - edit package.json to add `"@vercel/analytics": "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

diff --git a/apps/sveltekit/package.json b/apps/sveltekit/package.json
@@ -11,13 +11,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "latest",
-    "@sveltejs/kit": "latest",
-    "@sveltejs/vite-plugin-svelte": "latest",
+    "@sveltejs/adapter-vercel": "^7.0.0-next.0",
+    "@sveltejs/kit": "^3.0.0-next.5",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "@vercel/analytics": "workspace:*",
-    "svelte": "latest",
-    "svelte-check": "latest",
-    "typescript": "latest",
-    "vite": "latest"
+    "svelte": "^5.56.3",
+    "svelte-check": "^4",
+    "typescript": "^6",
+    "vite": "^8.0.12"
   }
 }
diff --git a/apps/sveltekit/src/routes/+layout.ts b/apps/sveltekit/src/routes/+layout.ts
@@ -1,8 +1,8 @@
 import {
   type BeforeSendEvent,
   injectAnalytics,
-} from '@vercel/analytics/sveltekit';
-import { dev } from '$app/environment';
+} from '@vercel/analytics/sveltekit-next';
+import { dev } from '$app/env';
 
 injectAnalytics({
   mode: dev ? 'development' : 'production',

diff --git a/apps/sveltekit/src/routes/[slug]/+page.svelte b/apps/sveltekit/src/routes/[slug]/+page.svelte
@@ -1,10 +1,10 @@
 <script>
-import { track } from '@vercel/analytics/sveltekit';
-import { page } from '$app/stores';
+import { track } from '@vercel/analytics/sveltekit-next';
+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="/" onclick={() => track('go-back', { slug: $page.params.slug })}
+<a href="/" onclick={() => track('go-back', { slug: page.params.slug })}
   >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
@@ -26,6 +26,8 @@ This package does **not** track data in development mode.
 3. Inject the Analytics script to your app
 
    - If you are using **Next.js** or **React**, you can use the `<Analytics />` component to inject the script into your app.
+   - If you are using **SvelteKit 2**, you can use the `injectAnalytics()` function from `@vercel/analytics/sveltekit` in your top-level `+layout.js/ts` file.
+   - If you are using **SvelteKit 3**, import `injectAnalytics()` from `@vercel/analytics/sveltekit-next` instead.
    - To add the tracking script for other frameworks, use the `inject` function.
    - If you want to use Vercel Web Analytics on a static site without npm, follow the instructions in the [documentation](https://vercel.com/docs/analytics/quickstart).
 

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vercel/analytics",
-  "version": "2.1.0-canary",
+  "version": "2.2.0-canary",
   "description": "Gain real-time traffic insights with Vercel Web Analytics",
   "keywords": [
     "analytics",
@@ -59,6 +59,10 @@
       "svelte": "./dist/sveltekit/index.mjs",
       "types": "./dist/sveltekit/index.d.ts"
     },
+    "./sveltekit-next": {
+      "types": "./dist/sveltekit-next/index.svelte.d.mts",
+      "svelte": "./dist/sveltekit-next/index.svelte.js"
+    },
     "./vue": {
       "browser": "./dist/vue/index.mjs",
       "import": "./dist/vue/index.mjs",
@@ -93,20 +97,25 @@
       "sveltekit": [
         "dist/sveltekit/index.d.ts"
       ],
+      "sveltekit-next": [
+        "dist/sveltekit-next/index.svelte.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",
+    "@sveltejs/kit": "^3.0.0-next.0",
     "@swc/core": "^1.9.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -123,7 +132,7 @@
   },
   "peerDependencies": {
     "@remix-run/react": "^2",
-    "@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.svelte.ts b/packages/web/src/sveltekit-next/index.svelte.ts
@@ -0,0 +1,40 @@
+import type {} from '@sveltejs/kit';
+import { page } from '$app/state';
+import { inject, pageview, track } from '../generic';
+import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
+import { getBasePath, getConfigString } from './utils';
+
+/**
+ * Injects Vercel Web Analytics in SvelteKit 3 apps.
+ */
+function injectAnalytics(props: Omit<AnalyticsProps, 'framework'> = {}): void {
+  let analyticsInjected = false;
+
+  $effect.root(() => {
+    $effect.pre(() => {
+      const route = page.route?.id;
+
+      if (!route) {
+        return;
+      }
+
+      if (!analyticsInjected) {
+        inject(
+          {
+            ...props,
+            basePath: getBasePath(),
+            disableAutoTrack: true,
+            framework: 'sveltekit',
+          },
+          getConfigString(),
+        );
+        analyticsInjected = true;
+      }
+
+      pageview({ route, path: page.url.pathname });
+    });
+  });
+}
+
+export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
+export { injectAnalytics, track };
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,29 @@
+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({
+      analytics: {
+        viewEndpoint: `/_vercel-${Math.random()}`,
+        eventEndpoint: `/hfi/${Math.random()}`,
+        sessionEndpoint: `/_sessions-${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
+  }
+}
diff --git a/packages/web/src/sveltekit/index.ts b/packages/web/src/sveltekit/index.ts
@@ -1,10 +1,14 @@
 import type {} from '@sveltejs/kit';
+// @ts-expect-error $app/environment has been removed in kit 3
 import { browser } from '$app/environment';
 import { page } from '$app/stores';
 import { inject, pageview, track } from '../generic';
 import type { AnalyticsProps, BeforeSend, BeforeSendEvent } from '../types';
 import { getBasePath, getConfigString } from './utils';
 
+/**
+ * Injects Vercel Web Analytics in SvelteKit 2 apps.
+ */
 function injectAnalytics(props: Omit<AnalyticsProps, 'framework'> = {}): void {
   if (browser) {
     inject(
@@ -25,5 +29,5 @@ function injectAnalytics(props: Omit<AnalyticsProps, 'framework'> = {}): void {
   }
 }
 
-export { injectAnalytics, track };
 export type { AnalyticsProps, BeforeSend, BeforeSendEvent };
+export { injectAnalytics, track };
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>