VueForge CodeBlock

A Vue 3 code block component with syntax highlighting and token-based theming for VueForge.

Coordinated release: @codemonster-ru/[email protected].

Requirements

• Node.js 20 or newer for consumer tooling and SSR.
• Vue ^3.5.0.

Install

npm install vue@^3.5.0 @codemonster-ru/vueforge-codeblock

pnpm add vue@^3.5.0 @codemonster-ru/vueforge-codeblock

yarn add vue@^3.5.0 @codemonster-ru/vueforge-codeblock

Quick start

There is no root package export. Import the Vue component and plugin from /view:

import { createApp } from 'vue';
import VueForgeCodeBlock from '@codemonster-ru/vueforge-codeblock/view';

createApp({}).use(VueForgeCodeBlock);

The plugin already registers VfCodeBlock. Alternatively, import the named component from /view for local registration, but do not register it again after installing the plugin.

The browser /view entry always loads standalone token, critical, and component CSS. Explicit CSS entries are available for SSR client stylesheets and CSS-only use: import tokens.css before critical.css or codeblock.css, or use style.css for the complete stylesheet. They do not turn the public browser /view entry into a CSS-free import.

Highlighting entry

import { highlightCodeBlock } from '@codemonster-ru/vueforge-codeblock/highlight';

const html = await highlightCodeBlock('typescript', 'const ready = true;');

Shiki core, its JavaScript engine, and language grammars are split into async chunks. A configured language allowlist limits the grammar chunks requested at runtime; it does not remove emitted dynamic chunks from a consumer build.

SSR can await highlighting through Vue server prefetch. Node ESM and CommonJS /view conditions are CSS-free, so import style.css in the client stylesheet of an SSR application.

More documentation

For full documentation, visit docs.codemonster.net/vueforge/codeblock. See the repository installation guide and CHANGELOG.md.

License

MIT