vue-diff

library1.2.4jsnpmunverified

Vue-diff is a Vue 3 component designed for rendering code differences in a user-friendly interface. It offers both split (side-by-side) and unified (inline) viewing modes, similar to those found in popular version control interfaces like GitHub Desktop. The component leverages `diff-match-patch` for its core diffing algorithm and `highlight.js` for robust syntax highlighting across various programming languages. Key features include support for customizable light and dark themes, virtual scrolling to efficiently handle large text comparisons, and a folding view for improved readability. It ships with TypeScript types, ensuring a good developer experience in TypeScript projects. The current stable version is 1.2.4, released in June 2022. While functional, its release cadence appears to be slow, suggesting a maintenance-focused development status rather than active feature expansion.

web-framework serialization

npm install vue-diff

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-DIFF

vue-diff

web-frameworkjavascriptv1.2.4

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.

VueDiff

✓ import VueDiff from 'vue-diff';

✗ const VueDiff = require('vue-diff');

The library is designed for ESM; CommonJS `require` is not supported for importing the main component.

CSS Styles

✓ import 'vue-diff/dist/index.css';

✗ import 'vue-diff/index.css';

The CSS entry point is specifically within the 'dist' folder.

Vue Application Plugin

✓ app.use(VueDiff);

✗ new Vue().use(VueDiff);

Vue 3 plugin installation uses `app.use()` on the application instance, not a global `Vue` constructor.

This quickstart demonstrates how to install and register `vue-diff` as a Vue 3 plugin, then use the `<Diff>` component to display a side-by-side comparison of two TypeScript code snippets with dark theme and virtual scrolling.

import { createApp } from 'vue'; import VueDiff from 'vue-diff'; import 'vue-diff/dist/index.css'; const app = createApp({ template: ` <div style="padding: 20px;"> <h1>Code Diff Example</h1> <Diff mode="split" theme="dark" language="typescript" :prev="prevCode" :current="currentCode" :virtual-scroll="{ height: 300, lineMinHeight: 24, delay: 100 }" /> </div> `, setup() { const prevCode = ` function hello(name: string) { console.log('Hello, ' + name + '!'); const age = 30; return name + age; } `; const currentCode = ` function greeting(name: string) { console.log('Hi, ' + name + '!'); const city = 'New York'; return `Welcome, ${name} from ${city}`; } `; return { prevCode, currentCode }; } }); app.use(VueDiff, { componentName: 'Diff' }); app.mount('#app');

Debug

Known issues

breaking`vue-diff` is exclusively built for Vue 3. It will not function with Vue 2 applications, requiring a migration if coming from an older Vue version.

fix

Ensure your project is a Vue 3 application. If not, consider migrating to Vue 3 or finding a Vue 2 compatible diff library.

affects: >=1.0.0

gotchaThe library has not received a major update since June 2022, suggesting it is in maintenance mode. While functional, expect slower bug fixes, feature additions, or updates to newer dependencies.

fix

Review the GitHub repository's issue tracker for active issues or known limitations before integrating into critical production paths. Be prepared to fork or contribute if specific new features or urgent bug fixes are needed.

affects: >=1.2.4

gotchaWhen customizing themes, ensure that the CSS variables or custom theme classes are correctly defined and provided. The `theme` prop accepts `'dark'`, `'light'`, or `custom${string}`. Incorrectly named custom themes will default to the fallback theme.

fix

Refer to the 'Custom theme' section in the documentation. Define your custom theme as a CSS class (e.g., `.my-custom-theme`) and pass its name (e.g., `'custommy-custom-theme'`) to the `theme` prop.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Failed to resolve component: Diff

The `vue-diff` component has not been correctly registered with your Vue application instance.

fix

Ensure you have called `app.use(VueDiff);` (or `app.use(VueDiff, { componentName: 'YourComponentName' });`) in your main application file (e.g., `main.ts` or `main.js`) before mounting the app.

Cannot find module 'vue-diff/dist/index.css' or its corresponding type declarations.

The CSS styles for `vue-diff` were not imported, leading to missing styling for the diff viewer.

fix

Add `import 'vue-diff/dist/index.css';` to your main application entry file (e.g., `main.ts` or `main.js`) or within a global style sheet.

Syntax highlighting is not working for specific languages.

The language specified in the `language` prop is not supported by default, or `highlight.js` needs to be extended with the desired language.

fix

Check the list of default supported languages in the `vue-diff` documentation. If your language is not listed, refer to the 'Extend languages' section to register additional `highlight.js` languages.

Upgrade

Version history

1.2.4latest on npm

Audit

Dependencies

diff-match-patchrequiredCore library for computing text differences.

highlight.jsrequiredProvides syntax highlighting for the code blocks being diffed.

vuerequiredPeer dependency as a Vue 3 component.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/hoiheart/vue-diff ↗

packagehttps://www.npmjs.com/package/vue-diff ↗