Svelte, Vue and Nuxt

Add the badge to Svelte, Vue and Nuxt

These frameworks all server-render by default, which is where third-party widgets usually go wrong: people reach for onMount or onMounted, the component remounts on every client-side navigation, and they end up with a badge per route. None of that is necessary. Each of the three has exactly one place that owns the document shell, and a tag put there loads once for the life of the tab. This is also the answer for SvelteKit, SolidJS.

Where the code goes

SvelteKit: src/app.html. The one file SvelteKit does not generate. Paste the line before </body>, after the div that holds %sveltekit.body%. It is outside the component tree entirely, so no SSR guard and no teardown.

Vue with Vite: index.html. Project root, the same file that holds <div id="app">. Same position, before </body>.

Nuxt: nuxt.config.ts. Nuxt owns its HTML, so there is no file to edit. Declare the script in app.head.script instead and Nuxt renders it into every page for you.

The code

src/app.html (SvelteKit) or index.html (Vue)

  <div>%sveltekit.body%</div>
  <script src="https://maketaksh.com/badge.js" data-taksh="yourname" defer></script>
</body>

nuxt.config.ts (Nuxt)

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        { src: "https://maketaksh.com/badge.js", "data-taksh": "yourname", defer: true },
      ],
    },
  },
});

Swap yourname for your handle. It is the one in your dashboard.

A badge per navigation

This is what happens if you reach for onMount or onMounted instead: every client-side route change runs the hook again and adds another badge. They stack in the same corner and look like a rendering bug. The HTML shell and the Nuxt config both load the script once for the life of the tab, which is why they are the answers above.

Checking it worked

Load the published page and look at the bottom corner. If nothing is there, it is almost always one of four things, in order of how often: the handle has no projects in it yet; the handle is wrong; the platform stripped the tag, as described above; or a content blocker ate it, check the Network tab for badge.js.

Once it is live, the Analytics panel in your dashboard lists every site the badge has been seen on, from the first page load, which is the fastest way to confirm an install on a site you cannot easily open.

Other setups

React · Next.js · All twelve setups

What the badge is, and why cross-linking your own launches is worth doing at all: the short version.