{"id":18911,"library":"vue-highlight.js","title":"vue-highlight.js","description":"A Vue.js component that integrates highlight.js for syntax highlighting. Version 3.1.0 targets Vue 2 and highlight.js ^9.11.0. The package previously bundled all languages but since v3.0.0 requires manual language imports to reduce bundle size. It ships TypeScript definitions and uses Vue's plugin system via Vue.use(). The package has beta releases for v4 which support highlight.js v10 and Vue language definitions.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/gluons/vue-highlight.js","tags":["javascript","vue","vuejs","vue-component","highlight.js","syntax","highlight","typescript"],"install":[{"cmd":"npm install vue-highlight.js","lang":"bash","label":"npm"},{"cmd":"yarn add vue-highlight.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-highlight.js","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for Vue 2","package":"vue","optional":false},{"reason":"peer dependency for syntax highlighting library","package":"highlight.js","optional":false}],"imports":[{"note":"Default ESM import. CommonJS require may work but ESM recommended.","wrong":"const VueHighlightJS = require('vue-highlight.js')","symbol":"VueHighlightJS","correct":"import VueHighlightJS from 'vue-highlight.js'"},{"note":"Must call Vue.use() to register the component globally with default name 'highlightjs'.","wrong":"Vue.component('highlightjs', VueHighlightJS)","symbol":"VueHighlightJS (via component)","correct":"Vue.use(VueHighlightJS)"},{"note":"Languages must be imported separately after v3.0.0. This imports the Vue language definition.","wrong":"import VueHighlightJS from 'vue-highlight.js'","symbol":"languages","correct":"import 'vue-highlight.js/lib/languages/vue'"},{"note":"Import all languages from highlight.js. Only available since v3.1.0.","wrong":"import VueHighlightJS from 'vue-highlight.js'","symbol":"allLanguages","correct":"import 'vue-highlight.js/lib/allLanguages'"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueHighlightJS from 'vue-highlight.js';\nimport 'vue-highlight.js/lib/languages/javascript';\nimport 'vue-highlight.js/lib/languages/css';\n\nVue.use(VueHighlightJS);\n\nnew Vue({\n  el: '#app',\n  template: '<highlightjs code=\"console.log(\\'hello\\')\" lang=\"javascript\" />'\n});","lang":"typescript","description":"Install and use the plugin with Vue 2, importing custom languages and rendering a highlighted code block."},"warnings":[{"fix":"Import languages manually, e.g., import 'vue-highlight.js/lib/languages/javascript'","message":"Since v3.0.0, languages are not automatically imported; you must manually import each language you need.","severity":"breaking","affected_versions":">=3.0.0 <3.1.0"},{"fix":"Install highlight.js separately: npm install highlight.js","message":"Peer dependency changed: highlight.js is now a peer dependency, not a bundled dependency.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Use <highlightjs> in templates, or register with a custom name via options.","message":"The component name is 'highlightjs' by default when using Vue.use(). Do not use PascalCase or other names.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade to v4.0.0-beta or later","message":"v3.x does not support highlight.js v10. Use v4.x beta for highlight.js v10 support.","severity":"deprecated","affected_versions":">=3.0.0 <4.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Call Vue.use(VueHighlightJS) before creating the Vue instance.","cause":"Component not registered globally because Vue.use() was not called or was called incorrectly.","error":"Unknown custom element: <highlightjs> - did you register the component correctly?"},{"fix":"Use correct path: import 'vue-highlight.js/lib/languages/vue'","cause":"Language path incorrect or language not installed. Ensure you are importing from the correct path.","error":"Cannot find module 'vue-highlight.js/lib/languages/vue'"},{"fix":"Run: npm install highlight.js@^9.11.0","cause":"highlight.js peer dependency not installed.","error":"highlight.js is not defined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}