Next.js, Vue, and other SPAs

All frameworks use the same snippet. en-sdk.js is loaded from EngageNudge, so the only file in your framework public/ folder is en-sw.js. Do not npm install @engagenudge/sdk. That package is not public.

Download en-sw.js from the dashboard Integrations tab. The snippet there already includes your site key, VAPID key, API URL, tenant id, and site id.

Chrome still requires /en-sw.js on your origin. A remote CMS URL will not register the worker.

Route changes in Next.js, Vue Router, and SvelteKit happen without a full page load. The SDK tracks them automatically: every pushState, replaceState, and back/forward navigation counts as a page view and re-checks the prompt rules, so a minimum page views trigger works even when visitors never reload. No router integration is needed.

Next.js (App Router)

Copy en-sw.js into public/.
Load the snippet in app/layout.tsx with next/script and strategy="afterInteractive", or a raw <script> in the root layout.

tsx

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://engagenudge.com/sdk/v1/en-sdk.js"
          strategy="afterInteractive"
          data-site-key="YOUR_SITE_KEY"
          data-vapid="YOUR_VAPID_PUBLIC_KEY"
          data-api="https://api.engagenudge.com"
          data-tenant-id="YOUR_TENANT_ID"
          data-site-id="YOUR_SITE_ID"
        />
      </body>
    </html>
  );
}

Vue (Vite / Nuxt)

Copy en-sw.js into public/. Paste the dashboard snippet in index.html before </body>, or add it in Nuxt app.vue / nuxt.config app.head.script.

Other SPA (React/Vite, SvelteKit)

Same public/ + root HTML or layout. The service worker path stays /en-sw.js.

Next.js, Vue, and other SPAs

Client-side navigation

Next.js (App Router)

Vue (Vite / Nuxt)

Other SPA (React/Vite, SvelteKit)

Related