Vue / Nuxt Installation

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

Important: The public key in your script must match a project in your Simple Commenter dashboard. If it doesn'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?id=sc_your_project_key"
      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.id = "sc_your_project_key";
  script.dataset.simpleCommenter = "true";
  script.defer = true;
  document.body.appendChild(script);
});
</script>

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

Replace sc_your_project_key with your project's public key from the Simple Commenter dashboard.

Method 3: Composable

Create a reusable composable:

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

export function useSimpleCommenter(publicKey) {
  onMounted(() => {
    if (!publicKey) 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.id = publicKey;
    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("sc_your_project_key");
</script>

Vue 2

Options API

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

    const script = document.createElement("script");
    script.src = "https://simplecommenter.com/js/comments.min.js";
    script.dataset.id = "sc_your_project_key";
    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?id=sc_your_project_key",
          defer: true,
        },
      ],
    },
  },
});

Method 2: useHead Composable

<!-- app.vue or layouts/default.vue -->
<script setup>
useHead({
  script: [
    {
      src: "https://simplecommenter.com/js/comments.min.js?id=sc_your_project_key",
      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.id = "sc_your_project_key";
  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?id=sc_your_project_key",
        defer: true,
        body: true,
      },
    ],
  },
};

Environment Variables

Vue (Vite)

# .env
VITE_SC_KEY=sc_your_project_key

script.dataset.id = import.meta.env.VITE_SC_KEY;

Nuxt

# .env
NUXT_PUBLIC_SC_KEY=sc_your_project_key

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

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 public key 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.