{"id":13296,"library":"highlightjs-vue","title":"Highlight.js Vue Component Definition","description":"highlightjs-vue is a syntax definition plugin for the highlight.js library, specifically designed to provide syntax highlighting for Single-File Components (SFCs) of the Vue.js framework. It enables highlight.js to correctly parse and illuminate the `<template>`, `<script>`, and `<style>` blocks within a `.vue` file by leveraging highlight.js's existing language definitions for HTML, JavaScript/TypeScript, and CSS/SCSS/LESS. The package is currently at version 1.0.0 and appears to be in a maintenance state, with stable functionality but infrequent updates, as its last known update was approximately two years ago. It primarily targets environments where CommonJS modules or global browser scripts are used, without native ESM exports.","status":"maintenance","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/highlightjs/highlightjs-vue","tags":["javascript","highlight","hljs","vue.js","vue"],"install":[{"cmd":"npm install highlightjs-vue","lang":"bash","label":"npm"},{"cmd":"yarn add highlightjs-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add highlightjs-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This package is a plugin for highlight.js and requires an instance of highlight.js to register its language definition.","package":"highlight.js","optional":false}],"imports":[{"note":"This package is CommonJS-only and does not provide native ESM exports. For ESM environments, bundler-specific CJS interop is required. The `require` call returns the function to register the language.","wrong":"import hljsDefineVue from 'highlightjs-vue';","symbol":"hljsDefineVue","correct":"const hljsDefineVue = require('highlightjs-vue');"},{"note":"While this plugin is CJS, highlight.js itself now recommends ESM imports (`import hljs from 'highlight.js';`) for modern applications. Ensure your build system handles the interop correctly if using both CJS plugins and ESM `highlight.js`.","wrong":"const hljs = require('highlight.js');","symbol":"hljs","correct":"import hljs from 'highlight.js';"},{"note":"When used directly in a browser via CDN, the plugin exposes its definition function on the global `window.hljsDefineVue` object. This function must then be manually registered with the `hljs` instance.","symbol":"window.hljsDefineVue","correct":"<script src=\"https://cdn.jsdelivr.net/npm/highlightjs-vue\"></script>\n<script>hljs.registerLanguage(\"vue\", window.hljsDefineVue);</script>"}],"quickstart":{"code":"import hljs from 'highlight.js';\n// In a modern ESM project, you might need to import CJS modules like this:\n// import hljsDefineVue from 'highlightjs-vue'; // This might fail without bundler config\n\n// More robust way to import a CJS module in an ESM context if your bundler supports it\n// Or, if running in Node.js CJS environment:\nconst hljsDefineVue = require('highlightjs-vue');\n\nhljsDefineVue(hljs); // Register the 'vue' language definition\n\nconst vueSfcCode = `\n<template>\n  <div class=\"container\">\n    <h1>{{ message }}</h1>\n    <button @click=\"increment\">Click me!</button>\n    <p>Count: {{ count }}</p>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref } from 'vue';\n\nexport default defineComponent({\n  name: 'HelloWorld',\n  props: {\n    msg: String,\n  },\n  setup() {\n    const count = ref(0);\n    const message = 'Hello Vue 3!';\n\n    const increment = () => {\n      count.value++;\n    };\n\n    return {\n      count,\n      message,\n      increment,\n    };\n  },\n});\n</script>\n\n<style scoped lang=\"scss\">\n.container {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n\n  h1 {\n    color: #42b983;\n  }\n}\n</style>\n`;\n\nconst highlightedCode = hljs.highlight(vueSfcCode, { language: 'vue' }).value;\n\nconsole.log(highlightedCode);\n// You would typically insert 'highlightedCode' into an HTML element\n// for display in a browser or generate static HTML.","lang":"typescript","description":"This quickstart demonstrates how to import highlight.js and highlightjs-vue (via CommonJS require), register the 'vue' language definition, and then apply it to a sample Vue Single-File Component (SFC) string. The output is the HTML string with highlighting spans."},"warnings":[{"fix":"For bundlers, ensure `allowSyntheticDefaultImports` or similar configurations are enabled if attempting `import hljsDefineVue from 'highlightjs-vue';`. The safest approach for CJS modules in ESM is often `import * as hljsDefineVueModule from 'highlightjs-vue'; const hljsDefineVue = hljsDefineVueModule.default || hljsDefineVueModule;` if it's a default export, or explicitly `require()` within an async context or a CJS file that exports to ESM.","message":"The `highlightjs-vue` package is CommonJS-only and does not provide native ESM exports. When used in modern JavaScript projects that primarily use ESM, bundlers like Webpack, Rollup, or Vite must be configured to correctly handle the CommonJS import, or a manual CJS wrapper might be needed.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure the script tags for highlight.js and highlightjs-vue are present, and then call `hljs.registerLanguage(\"vue\", window.hljsDefineVue);` in a subsequent script block.","message":"When using `highlightjs-vue` via CDN in the browser, the language definition is exposed as a global `window.hljsDefineVue`. It must be manually registered with the `hljs` instance using `hljs.registerLanguage(\"vue\", window.hljsDefineVue);` after both `highlight.js` and `highlightjs-vue` scripts are loaded.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always load `highlight.js` and ensure its `hljs` object is available before attempting to `require` or register `highlightjs-vue`.","message":"This package is specifically for `highlight.js` and requires an active instance of `highlight.js` to function. Attempting to use it without `highlight.js` being loaded and initialized will result in errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Review the GitHub repository for recent activity or open issues if encountering highlighting inaccuracies with very new Vue syntax. Consider contributing fixes if necessary, or exploring alternative highlighting solutions if active development is a critical requirement.","message":"The package has not seen significant updates in approximately two years (as of April 2026), indicating it is in a maintenance mode. While stable for existing Vue versions, new features or significant changes in future Vue releases might not be immediately supported.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `highlight.js` is loaded and its `hljs` object is accessible before calling `hljs.registerLanguage`. If using ESM, `import hljs from 'highlight.js';` is usually correct. For CJS, `const hljs = require('highlight.js');`.","cause":"The `highlight.js` library has not been correctly loaded or initialized, or `hljs` is not the correct instance.","error":"TypeError: hljs.registerLanguage is not a function"},{"fix":"Use the CommonJS `require()` syntax: `const hljsDefineVue = require('highlightjs-vue');`. If in an ESM-only file, you might need bundler configuration or a dynamic import (`import('highlightjs-vue').then(m => m.default || m)`) if your environment supports it.","cause":"Attempting to import `highlightjs-vue` using `import hljsDefineVue from 'highlightjs-vue';` in an ESM context, but the package is CommonJS-only and lacks a default export for ESM.","error":"SyntaxError: Named export 'default' not found (module 'highlightjs-vue')"},{"fix":"Verify that both `<script src=\"highlightjs\">` and `<script src=\"highlightjs-vue\">` tags are correctly placed and loaded *before* the script block that calls `hljs.registerLanguage(\"vue\", window.hljsDefineVue);`.","cause":"When using the CDN version, `window.hljs` might not be available or `window.hljsDefineVue` is not loaded before `hljs.registerLanguage` is called.","error":"Cannot read properties of undefined (reading 'registerLanguage')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}