{"id":12548,"library":"vue-prism-component","title":"Vue Prism.js Component","description":"vue-prism-component is a Vue component wrapper for Prism.js, providing syntax highlighting capabilities within Vue applications. The current stable version is 2.0.0, which targets Vue 3. Version 1.x supports Vue 2. The package maintains a steady release cadence, with updates typically driven by new Vue major versions or dependency updates. Its key differentiator is its straightforward integration into Vue SFCs and JSX, allowing developers to easily display formatted code blocks or inline code snippets using the popular Prism.js library. Unlike direct Prism.js usage, this component handles reactivity and rendering within the Vue ecosystem, simplifying dynamic code display and theme management. It requires `prismjs` as a peer dependency for core highlighting functionality and themes.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/vue-prism-component","tags":["javascript"],"install":[{"cmd":"npm install vue-prism-component","lang":"bash","label":"npm"},{"cmd":"yarn add vue-prism-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-prism-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue component. v2.x requires Vue 3, v1.x requires Vue 2.","package":"vue","optional":false},{"reason":"Core syntax highlighting library. Must be installed and loaded separately.","package":"prismjs","optional":false}],"imports":[{"note":"The component is exported as a default export. CommonJS `require` syntax might lead to issues in ESM-only environments or bundler configurations.","wrong":"const Prism = require('vue-prism-component')","symbol":"Prism","correct":"import Prism from 'vue-prism-component'"},{"note":"Required to apply the visual styling of Prism.js. Developers often forget this, resulting in unstyled code blocks. Other themes like `prism-tomorrow.css` can be imported similarly.","symbol":"prismjs styles","correct":"import 'prismjs/themes/prism.css'"},{"note":"To highlight specific languages beyond the default, their respective components must be explicitly imported from `prismjs/components/`.","symbol":"prismjs language components","correct":"import 'prismjs/components/prism-rust'"}],"quickstart":{"code":"import { createApp, h } from 'vue';\nimport Prism from 'vue-prism-component';\nimport 'prismjs'; // Core Prism.js\nimport 'prismjs/themes/prism-tomorrow.css'; // A dark theme\nimport 'prismjs/components/prism-javascript'; // Language support for JavaScript\nimport 'prismjs/components/prism-css'; // Language support for CSS\n\nconst App = {\n  components: { Prism },\n  data() {\n    return {\n      jsCode: 'function greet() {\\n  console.log(\\\"Hello, Vue!\\\");\\n}',\n      cssCode: '.container {\\n  margin: 0 auto;\\n  padding: 20px;\\n}',\n      inlineCode: 'const x = 10;' \n    };\n  },\n  template: `\n    <div>\n      <h1>JavaScript Example:</h1>\n      <prism language=\"javascript\">{{ jsCode }}</prism>\n\n      <h1>CSS Example:</h1>\n      <prism language=\"css\" :code=\"cssCode\" />\n\n      <h2>Inline Code:</h2>\n      <p>Here's some inline code: <prism inline language=\"javascript\">{{ inlineCode }}</prism></p>\n    </div>\n  `\n};\n\ncreateApp(App).mount('#app');","lang":"javascript","description":"This quickstart demonstrates how to set up and use `vue-prism-component` in a Vue 3 application. It shows importing Prism.js core, a theme, and specific language components, then renders both block and inline code snippets using the `<Prism>` component with `language` and `code` props."},"warnings":[{"fix":"If migrating to Vue 3, update `vue-prism-component` to v2.0.0. For Vue 2 projects, ensure `vue-prism-component` is pinned to a version less than 2.0.0 (e.g., `^1.0.0`).","message":"Version 2.0.0 introduces a breaking change by migrating to Vue 3. Applications built with Vue 2 must remain on `vue-prism-component` v1.x.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Run `npm install prismjs` or `yarn add prismjs`. Then, in your main app file or a relevant component, add `import 'prismjs'` and `import 'prismjs/themes/prism.css'` (or your chosen theme).","message":"The `prismjs` library is a peer dependency and must be installed separately. Additionally, its core script (`import 'prismjs'`) and desired theme (`import 'prismjs/themes/prism.css'`) must be imported into your application.","severity":"gotcha","affected_versions":"*"},{"fix":"For each specific language you wish to highlight, add an import like `import 'prismjs/components/prism-python'` to your application's entry point or relevant component.","message":"To highlight languages other than HTML/XML, CSS, and JavaScript, you must explicitly import the corresponding language component from `prismjs/components/`. Failing to do so will result in unhighlighted code for that language.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `Prism` is imported and registered in the `components` option of your Vue component (e.g., `components: { Prism }`) or globally registered if using `app.component()`.","cause":"The `Prism` component was not correctly registered with the Vue application or component where it's being used.","error":"[Vue warn]: Failed to resolve component: Prism"},{"fix":"Install `prismjs` by running `npm install prismjs` or `yarn add prismjs`. Verify that your package manager successfully installed it.","cause":"`prismjs` is a required peer dependency but was not installed or is not resolvable by the module system.","error":"Error: Cannot find module 'prismjs'"},{"fix":"In your main application entry point (e.g., `main.js`/`main.ts`), add `import 'prismjs'` and `import 'prismjs/themes/prism.css'` (or the path to your preferred theme).","cause":"The Prism.js core library and/or a Prism.js theme stylesheet has not been imported into the application.","error":"Code appears unhighlighted or poorly styled despite using the Prism component."}],"ecosystem":"npm"}