Vue / Nuxt Installation

Add Simple Commenter to your Vue.js or Nuxt application.

Important: The domain in your script must exactly match the domain you registered in your Simple Commenter dashboard. If they don't match, the widget won't load.

Vue 3

Method 1: index.html

The simplest approach - add to your HTML file:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>

    <!-- Add Simple Commenter -->
    <script
      src="https://simplecommenter.com/js/comments.min.js"
      data-domain="your-domain.com"
      defer
    ></script>
  </body>
</html>

Method 2: App.vue

Load dynamically using the Composition API:

<!-- App.vue -->
<script setup>
import { onMounted } from "vue";

onMounted(() => {
  if (document.querySelector('script[data-simple-commenter]')) return;

  const script = document.createElement("script");
  script.src = "https://simplecommenter.com/js/comments.min.js";
  script.dataset.domain = "your-domain.com";
  script.dataset.simpleCommenter = "true";
  script.defer = true;
  document.body.appendChild(script);
});
</script>

<template>
  <router-view />
</template>

Replace your-domain.com with your actual domain from the Simple Commenter dashboard.

Method 3: Composable

Create a reusable composable:

// composables/useSimpleCommenter.js
import { onMounted, onUnmounted } from "vue";

export function useSimpleCommenter(domain) {
  onMounted(() => {
    if (!domain) return;
    if (document.querySelector('script[data-simple-commenter]')) return;

    const script = document.createElement("script");
    script.src = "https://simplecommenter.com/js/comments.min.js";
    script.dataset.domain = domain;
    script.dataset.simpleCommenter = "true";
    script.defer = true;
    document.body.appendChild(script);
  });

  onUnmounted(() => {
    const script = document.querySelector('script[data-simple-commenter]');
    if (script) script.remove();
  });
}

Usage:

<script setup>
import { useSimpleCommenter } from "@/composables/useSimpleCommenter";

useSimpleCommenter("your-domain.com");
</script>

Vue 2

Options API

<script>
export default {
  mounted() {
    if (document.querySelector('script[data-domain]')) return;

    const script = document.createElement("script");
    script.src = "https://simplecommenter.com/js/comments.min.js";
    script.dataset.domain = "your-domain.com";
    script.defer = true;
    document.body.appendChild(script);
  }
};
</script>

Nuxt 3

Method 1: nuxt.config.ts (Recommended)

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: "https://simplecommenter.com/js/comments.min.js",
          "data-domain": "your-domain.com",
          defer: true,
        },
      ],
    },
  },
});

Method 2: useHead Composable

<!-- app.vue or layouts/default.vue -->
<script setup>
useHead({
  script: [
    {
      src: "https://simplecommenter.com/js/comments.min.js",
      "data-domain": "your-domain.com",
      defer: true,
    },
  ],
});
</script>

<template>
  <NuxtPage />
</template>

Method 3: Plugin

Create a Nuxt plugin:

// plugins/simple-commenter.client.ts
export default defineNuxtPlugin(() => {
  if (document.querySelector('script[data-simple-commenter]')) return;

  const script = document.createElement("script");
  script.src = "https://simplecommenter.com/js/comments.min.js";
  script.dataset.domain = "your-domain.com";
  script.dataset.simpleCommenter = "true";
  script.defer = true;
  document.body.appendChild(script);
});

The .client.ts suffix ensures the plugin only runs on the client side.

Nuxt 2

Add to nuxt.config.js:

// nuxt.config.js
export default {
  head: {
    script: [
      {
        src: "https://simplecommenter.com/js/comments.min.js",
        "data-domain": "your-domain.com",
        defer: true,
        body: true,
      },
    ],
  },
};

Environment Variables

Vue (Vite)

# .env
VITE_SC_DOMAIN=your-domain.com

script.dataset.domain = import.meta.env.VITE_SC_DOMAIN;

Nuxt

# .env
NUXT_PUBLIC_SC_DOMAIN=your-domain.com

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      scDomain: process.env.NUXT_PUBLIC_SC_DOMAIN,
    },
  },
});

Verifying Installation

Run your development server
Open your app in the browser
Look for the feedback widget button
Navigate between routes to verify persistence
Check browser console for errors

Troubleshooting

Verify the domain matches your dashboard settings
Check browser console for errors
Ensure the script is loading (Network tab in DevTools)
For Nuxt SSR, ensure the script runs client-side

SSR considerations

The widget is client-side only. In Nuxt:

Use .client.ts suffix for plugins
Use <ClientOnly> wrapper if needed
The script naturally only runs in the browser

Vue Router / Nuxt routing

The widget persists across route changes. It loads once and stays active throughout the session.

Need help? Contact support.