Vue / Nuxt

CodeGloss ships a thin Vue 3 wrapper at @codegloss/vue. Under the hood it renders the same <code-gloss> Web Component with a JSON config child.

Install

npm install codegloss @codegloss/vue

Direct component usage

Import and use CodeGloss like any Vue component:

<script setup lang="ts">
import { CodeGloss } from '@codegloss/vue';
</script>

<template>
  <CodeGloss
    code="function greet(name) { return 'Hello, ' + name; }"
    lang="js"
    filename="greet.js"
    :annotations="[
      { id: 'a1', token: 'name', line: 0, occurrence: 0,
        title: 'Parameter', text: 'The name to greet.' }
    ]"
  />
</template>

No CSS import needed. The Web Component bundles its styles via Shadow DOM.

VitePress

VitePress uses Vue under the hood. Register the component globally in your theme:

// docs/.vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme';
import { CodeGloss } from '@codegloss/vue';
import type { Theme } from 'vitepress';

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.component('CodeGloss', CodeGloss);
  },
} satisfies Theme;

Then tell Vue's compiler to treat <code-gloss> as a custom element (prevents unknown-element warnings):

// docs/.vitepress/config.ts
import { defineConfig } from 'vitepress';

export default defineConfig({
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag === 'code-gloss',
      },
    },
  },
});

Now you can use <CodeGloss /> directly in any .md page:

<CodeGloss
  code="const x = 42;"
  lang="js"
  filename="example.js"
  :annotations="[{ id: 'a1', token: '42', line: 0, occurrence: 0,
    title: 'The answer', text: 'A constant value.' }]"
/>

See the VitePress setup guide for the full remark plugin integration.

Nuxt

In a Nuxt 3 project, register the component as a plugin:

// plugins/codegloss.client.ts
import { CodeGloss } from '@codegloss/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('CodeGloss', CodeGloss);
});

Add code-gloss to the Vue compiler's custom elements list in nuxt.config.ts:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag === 'code-gloss',
    },
  },
});

Then use <CodeGloss /> in any page or component.