Add comments to a Nuxt site

Nuxt navigates between pages on the client, without full page reloads. That detail matters for any embedded widget: a script that runs once on the first page will not run again when the reader navigates to the next article. The clean solution is a component that loads the embed script when it mounts.

1. Create the component

Create app/components/Comments.vue:

<template>
  <div id="hakanai-connect" />
</template>

<script setup lang="ts">
const props = defineProps<{ pageId?: string }>()
const route = useRoute()

onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://connect.hakanai.io/embed.js'
  script.async = true
  script.dataset.key = 'YOUR_SITE_KEY'
  script.dataset.pageId = props.pageId ?? route.path
  document.body.appendChild(script)

  onUnmounted(() => {
    script.remove()
  })
})
</script>

Replace YOUR_SITE_KEY with the public key from your dashboard.

The component appends the script on mount and removes it on unmount, so every article page gets a fresh initialization with its own URL and page id. The script itself is served with cache headers, so repeat navigations do not re-download it.

2. Use it in your article page

In your blog post page, for example app/pages/blog/[slug].vue:

<template>
  <article>
    <ContentRenderer :value="page" />
  </article>
  <Comments :page-id="page.stem" />
</template>

Any stable string works as page-id: the route slug, a Nuxt Content stem, or a CMS entry id. See page identity for why this matters.

Since the component only renders a div on the server, it is SSR-safe and adds nothing to your server-rendered HTML beyond the container.

Fully prerendered sites

If your Nuxt site is generated with nuxi generate and you do not use client-side navigation (no <NuxtLink> between articles, or experimental.appManifest style full reloads), the plain HTML snippet from the installation guide also works. The component approach above works in both cases, so when in doubt, use the component.

Comment counts on list pages

On your blog index, add a counter element per post:

<span :data-connect-count="post.stem" />

Then follow the comment counts guide. Use the same values as your page ids so counts and threads match.

Local preview

The dev server runs on localhost, which is not one of your declared domains, so comment submission is rejected there. Reading works. Add your staging domain under Site settings if you want to test posting before going live.