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

Import and use CodeGloss like any Vue component:

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

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

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

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

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

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

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

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