Best Product Tours Software for Nuxt

Nuxt and in-app guidance

Installing Produktly on Nuxt

Use the head config in nuxt.config.ts to inject the snippet on every page.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML: `
            (function (w, d, f) {
              var a = d.getElementsByTagName("head")[0];
              var s = d.createElement("script");
              s.async = 1; s.src = f;
              s.setAttribute("id", "produktlyScript");
              s.dataset.clientToken = "YOUR_TOKEN";
              a.appendChild(s);
            })(window, document, "https://public.produktly.com/js/main.js");
          `,
          type: 'text/javascript'
        }
      ]
    }
  }
});

For Nuxt 2, the same shape works under head() in nuxt.config.js. The snippet is async, so it does not block hydration.

Things to watch out for on Nuxt

• Hydration warnings if the snippet manipulates DOM early

  Avoid creating DOM elements before hydration completes. Loading async is the simplest path; the IIFE pattern above defers until the script downloads.

• Page transitions are not full reloads

  Enable Produktly’s SPA redirect handling so tours that move between Nuxt routes continue across navigations.

• Server-only pages skip client-side hooks

  If you’ve disabled hydration on a specific page, Produktly will not initialize there. Keep the snippet at the global app level so it loads everywhere your users actually interact.