Registry /
web-framework / vue-highlight-component
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Highlight
✓ import Highlight from 'vue-highlight-component'
✗ import { Highlight } from 'vue-highlight-component'
The README shows `import Highlight from 'vue-Highlight-component'`, indicating a default export, though the usage in `<script>` implies a named component. For the given package version, assuming it's correctly used as a named component in the options API `components` object.
hljs
✓ import hljs from 'highlight.js'
✗ const hljs = require('highlight.js')
Required to manually register additional languages not included in the default `highlight.js` bundle. This import is directly from `highlight.js`, not `vue-highlight-component`.
CSS Theme
✓ import 'highlight.js/styles/default.css'
A `highlight.js` theme stylesheet must be imported separately to apply visual styling to the highlighted code. Choose from available themes in `node_modules/highlight.js/styles/`.
This quickstart demonstrates how to set up and use the `Highlight` component in a Vue 2 application, including registering a custom language and applying a visual theme from `highlight.js`.
<template>
<div id="app">
<h1>Code Example: Swift</h1>
<highlight language="swift">{{ codeSnippet }}</highlight>
<h1>Code Example: JavaScript (via prop)</h1>
<highlight language="javascript" :code="jsCodeSnippet"></highlight>
</div>
</template>
<script>
import hljs from 'highlight.js';
import Highlight from 'vue-highlight-component';
// Import a highlight.js theme for styling
import 'highlight.js/styles/atom-one-dark.css'; // Or any other theme from highlight.js/styles
// Register Swift language if it's not supported by default
// This typically requires installing language-specific modules for highlight.js v9.x
try {
hljs.registerLanguage('swift', require('highlight.js/lib/languages/swift'));
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
} catch (e) {
console.warn('Could not register language, ensure highlight.js language packages are installed:', e);
}
export default {
name: 'App',
data() {
return {
codeSnippet: `func greet(person: String) -> String {
let greeting = "Hello, " + person + "!"
return greeting
}`,
jsCodeSnippet: `function factorial(n) {
if (n === 0) {
return 1;
}
return n * factorial(n - 1);
}`
};
},
components: {
Highlight
}
};
</script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
margin: 20px;
background-color: #282c34;
color: #abb2bf;
}
h1 {
color: #61afef;
margin-top: 40px;
}
pre {
background-color: #21252b;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
}
</style>
Debug
Known issues
breakingThis package (`vue-highlight-component`) is abandoned and has not been updated in over seven years. It is not compatible with Vue 3 and relies on an outdated version of `highlight.js` (v9.x).fixFor new projects, or to migrate existing ones, use the officially supported `@highlightjs/vue-plugin` for Vue 2 and Vue 3, or a different, actively maintained highlighting solution like `vue-code-highlighter` or `vue-prism-component`.
affects: All versions (1.0.0)
gotchaThe `highlight.js` library (v9.x) used by this component often requires manual registration of specific languages if they are not part of the default bundle. Importing `highlight.js/lib/languages/` for each needed language is necessary.fixEnsure you `require` and `hljs.registerLanguage()` for every language you intend to highlight, as shown in the quickstart example. Modern `highlight.js` (v11+) has different import paths (`highlight.js/lib/core` and language-specific imports) and common bundles.
affects: All versions (1.0.0)
gotchaVisual styling for the highlighted code is not included by the `vue-highlight-component` itself. A `highlight.js` CSS theme file must be imported separately into your project.fixAdd an `import 'highlight.js/styles/<theme-name>.css'` statement in your main JavaScript file or a component's style block (if using a pre-processor that handles CSS imports) to apply a theme. Examples include `default.css`, `atom-one-dark.css`, etc.
affects: All versions (1.0.0)
gotchaThis component is designed for Vue 2. Attempting to use it directly in a Vue 3 application will likely result in compatibility issues or errors due to changes in Vue's API and component instantiation.fixUse `@highlightjs/vue-plugin` which provides separate versions for Vue 2 (v1.x) and Vue 3 (v2.x) to ensure full compatibility with your Vue version.
affects: All versions (1.0.0)
Errors
Common errors & fixes
Error: Unknown language: <language-name>
The specific highlighting language required was not registered with `highlight.js`.
fixImport the language module and register it using `hljs.registerLanguage('<language-name>', require('highlight.js/lib/languages/<language-name>'))`. Highlighted code appears unstyled (no colors, just plain text).
No `highlight.js` CSS theme has been imported into the project.
fixAdd an `import 'highlight.js/styles/default.css'` (or your preferred theme) statement in your main application entry file (e.g., `main.js`) or a global style sheet.
[Vue warn]: Failed to mount component: template or render function not defined.
This error often occurs when a Vue 2 component is used in a Vue 3 application or when a component's definition is incorrectly imported or registered.
fixVerify that your project is indeed Vue 2. If it's Vue 3, switch to `@highlightjs/vue-plugin` (v2.x) or another Vue 3-compatible highlighting library.
Audit
Dependencies
highlight.jsrequiredCore highlighting library that this component wraps. Requires version ^9.12.0.