CommentKit / Frameworks

Vue and Nuxt

The Vue plugin, a client-only Nuxt plugin and the build plugin.

Set up with the CLI

In your app’s folder

npx @commentkit/cli init

In a Vue app built with Vite it writes VITE_COMMENTKIT_KEY to .env.local and adds the plugin to vite.config. In Nuxt it writes NUXT_PUBLIC_COMMENTKIT_KEY to .env and shows the lines to add to nuxt.config.ts.

It asks before each change. --yes applies them all and --install also installs the packages. To do it by hand, follow the steps below. See the CLI guide for the other commands.

Terminal

npm install @commentkit/comment-kit

src/main.ts

import { createApp } from "vue";
import { CommentKitPlugin } from "@commentkit/comment-kit/vue";
import App from "./App.vue";

const app = createApp(App);

app.use(CommentKitPlugin, { project: import.meta.env.VITE_COMMENTKIT_KEY });
app.mount("#app");

The plugin calls init() once. Prefer a component? <CommentKit project="…" /> from the same import starts the widget when it mounts and removes it when it unmounts.

Nuxt

plugins/commentkit.client.ts

import { CommentKitPlugin } from "@commentkit/comment-kit/vue";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(CommentKitPlugin, { project: useRuntimeConfig().public.commentkitKey });
});

The same Vue plugin, installed from a Nuxt plugin. The .client.ts suffix makes Nuxt run it only in the browser. Declare the key in your runtime config so NUXT_PUBLIC_COMMENTKIT_KEY fills it in:

nuxt.config.ts

import commentkit from "@commentkit/build/vite";

export default defineNuxtConfig({
  runtimeConfig: { public: { commentkitKey: "" } },
  vite: { plugins: [commentkit()] },
});

Build plugin

Terminal

npm install -D @commentkit/build

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import commentkit from "@commentkit/build/vite";

export default defineConfig({
  plugins: [commentkit(), vue()],
});

In Nuxt it goes in vite.plugins, as above. Elements in .vue templates are tagged with their source file and line while the dev server runs.

The plugin also records the branch and commit of every build, so feedback is filed per branch without passing anything to init(). Values you pass yourself always win.

Environment variables

VITE_COMMENTKIT_KEY (Vue with Vite) or NUXT_PUBLIC_COMMENTKIT_KEY (Nuxt): your project key. Public by design.
import.meta.env.VITE_COMMENTKIT_BRANCH and VITE_COMMENTKIT_COMMIT: set by the plugin.

The branch and commit come from the first of these that is set: COMMENTKIT_BRANCH / COMMENTKIT_COMMIT (your override), then Vercel, Netlify, Cloudflare Pages, GitHub Actions, GitLab CI and Render’s own variables, then git. Set COMMENTKIT_SOURCE=1 to tag a preview build with source locations too, or COMMENTKIT_SOURCE=0 to turn tagging off. See build plugins.

Server rendering

The Vue plugin does nothing when there is no window, and the Nuxt plugin above only runs in the browser.

init() does nothing on the server, so importing it never breaks server rendering. Call it once in the browser and keep the instance; destroy() removes every trace of the widget from the page.