My Dashboard

Install on Vue

Add PopupNeko to the HTML entry document of your Vue application.

On this page
  1. Add the global script
  2. Vue Router behavior
  3. Publish and verify

For a Vue application using Vite, add the script to the project-root index.html. If your project uses Nuxt, follow the Nuxt guide.

Add the global script

Copy your project's script from Install Script, then merge it into the existing HTML head:

index.html
<head>
  <!-- Keep the existing Vue application's metadata. -->
  <script
    defer
    src="https://popupneko.com/script/popupneko.js"
    data-project-id="YOUR_PROJECT_ID"
  ></script>
</head>

Use the project ID from your dashboard. Leave your Vue mount element and module entry script in place. For an older build setup, use its equivalent HTML template. The Vite guide explains how its HTML entry is processed.

A Vue plugin or component is not required. Avoid inserting the embed into App.vue or adding it on every component mount.

Vue Router behavior

For history-based routes, PopupNeko notices pathname changes, applies the new path's targeting, and refreshes activity. The same global script handles back/forward navigation.

Hash-mode routes share one pathname. PopupNeko ignores hash-only changes, so rules cannot distinguish /#/pricing from /#/account. Use history-based URLs if you need separate targeting for those pages.

Publish and verify

Build and publish your app, then visit an allowed production path. Use Verify Connection in PopupNeko to check the production HTML.

New projects allow / and /pricing by default. Review Page targeting and Allowed Domains before testing other routes or staging hosts. Troubleshooting covers detected scripts with no visible popup.