Best Product Tours Software for Vue.js

Vue.js and in-app guidance

Installing Produktly on Vue.js

Add the snippet to public/index.html so it loads once for the whole app, before Vue mounts.

<!-- public/index.html -->
<script>
  (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");
</script>

If you only have access to runtime code, drop the IIFE into your main.js before app.mount() and it loads the same way.

Things to watch out for on Vue.js

• Scoped CSS hashes break selectors

  Vue rewrites class names like .button to .button[data-v-abc123]. Target elements with stable data-* attributes you control, not Vue-generated class names.

• Vue Router transitions are not page loads

  Switch on Produktly’s SPA redirect mode so step changes follow router-link navigation instead of waiting for a full page reload that never happens.

• v-if removes nodes from the DOM entirely

  Elements behind v-if disappear from the DOM when false. If your tour targets one, ensure the condition is true before the step fires, or use v-show to keep the element present.