Registry / web-framework / vue-prism-component

vue-prism-component

library2.0.0jsnpmunverified

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.

web-framework

npm install vue-prism-component

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-PRISM-COMPONEN

vue-prism-component

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Prism

✓ import Prism from 'vue-prism-component'

✗ const Prism = require('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/`.

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');

Debug

Known issues

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

affects: >=2.0.0

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

affects: *

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

affects: *

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: Prism

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'

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

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

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue component. v2.x requires Vue 3, v1.x requires Vue 2.

prismjsrequiredCore syntax highlighting library. Must be installed and loaded separately.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/egoist/vue-prism-component ↗

packagehttps://www.npmjs.com/package/vue-prism-component ↗

homepagehttps://egoistian.com/vue-prism-component/ ↗