Vue Prism.js Component

2.0.0 · active · verified Sun Apr 19

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.

Common errors

```
[Vue warn]: Failed to resolve component: Prism
```
cause The `Prism` component was not correctly registered with the Vue application or component where it's being used.

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()`.
```
Error: Cannot find module 'prismjs'
```
cause `prismjs` is a required peer dependency but was not installed or is not resolvable by the module system.

fix Install `prismjs` by running `npm install prismjs` or `yarn add prismjs`. Verify that your package manager successfully installed it.
```
Code appears unhighlighted or poorly styled despite using the Prism component.
```
cause The Prism.js core library and/or a Prism.js theme stylesheet has not been imported into the application.

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).

Warnings

breaking 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.
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`).
gotcha 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.
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).
gotcha 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.
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.

Install

npm install vue-prism-component npm
yarn add vue-prism-component yarn
pnpm add vue-prism-component pnpm

Imports

Prism
wrong:
```
const Prism = require('vue-prism-component')
```
correct:
```
import Prism from 'vue-prism-component'
```
The component is exported as a default export. CommonJS `require` syntax might lead to issues in ESM-only environments or bundler configurations.
prismjs styles
```
import 'prismjs/themes/prism.css'
```
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.
prismjs language components
```
import 'prismjs/components/prism-rust'
```
To highlight specific languages beyond the default, their respective components must be explicitly imported from `prismjs/components/`.

Quickstart

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.

import { createApp, h } from 'vue';
import Prism from 'vue-prism-component';
import 'prismjs'; // Core Prism.js
import 'prismjs/themes/prism-tomorrow.css'; // A dark theme
import 'prismjs/components/prism-javascript'; // Language support for JavaScript
import 'prismjs/components/prism-css'; // Language support for CSS

const App = {
  components: { Prism },
  data() {
    return {
      jsCode: 'function greet() {\n  console.log(\"Hello, Vue!\");\n}',
      cssCode: '.container {\n  margin: 0 auto;\n  padding: 20px;\n}',
      inlineCode: 'const x = 10;' 
    };
  },
  template: `
    <div>
      <h1>JavaScript Example:</h1>
      <prism language="javascript">{{ jsCode }}</prism>

      <h1>CSS Example:</h1>
      <prism language="css" :code="cssCode" />

      <h2>Inline Code:</h2>
      <p>Here's some inline code: <prism inline language="javascript">{{ inlineCode }}</prism></p>
    </div>
  `
};

createApp(App).mount('#app');

view raw JSON →