v-code-diff

library1.13.1jsnpmunverified

v-code-diff is a Vue.js component designed for visually displaying code differences, supporting both Vue 2 (2.6.0+) and Vue 3 environments through its `vue-demi` integration. The current stable version is 1.13.1, with active development on the 1.x branch. This library differentiates itself by offering seamless cross-version compatibility for Vue projects, allowing developers to integrate robust code diffing capabilities regardless of their specific Vue ecosystem version. It builds upon established projects like `vue-diff` and `vue-code-diff`, and leverages `highlight.js` for extensive language support, defaulting to plaintext but configurable for numerous programming languages. The component supports both local and global registration, with local registration being the recommended approach for optimal tree-shaking. A clear migration path from the older 0.x versions to the current 1.x series is provided to simplify transitions.

web-framework serialization

package ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

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

Use named import for local component registration, especially in Vue 3 setup scripts or Vue 2 component options.

import { CodeDiff } from 'v-code-diff'

For global plugin registration with `Vue.use()` or `app.use()`, the library exports itself as a default export.

import CodeDiff from 'v-code-diff'; // then Vue.use(CodeDiff) or app.use(CodeDiff)

This library is primarily designed for ESM consumption. While bundlers handle CJS, direct `require` might not resolve correctly for named exports without specific configuration.

import { CodeDiff } from 'v-code-diff'

This quickstart demonstrates local registration of the `CodeDiff` component in a Vue 3 application, showing a side-by-side comparison of two JavaScript code strings with line numbers.

import { createApp } from 'vue'; import { CodeDiff } from 'v-code-diff'; const app = createApp({ components: { CodeDiff }, template: ` <div> <h1>Code Diff Example</h1> <p>This demonstrates a basic side-by-side code difference view.</p> <CodeDiff old-string="function hello() {\n console.log('Hello, world!');\n}\n\nhello();" new-string="function hello() {\n console.error('Hello, new world!');\n}\n\nhello();\nconsole.log('Done.');" output-format="side-by-side" language="javascript" :render-unchanged-lines="true" /> </div> ` }); app.mount('#app');

Debug

Known footguns

breakingMigration from 0.x versions to 1.x involves significant changes. The 0.x branch is no longer maintained, and functionality alignment in 1.x requires review.

gotchaFor Vue 2.6+ projects, the `@vue/composition-api` package must be explicitly installed to enable the Composition API, which `v-code-diff` relies upon for cross-version compatibility.

gotchaWhen using the component, ensure to correctly import it using named imports (`import { CodeDiff } from 'v-code-diff'`) for local registration or a default import (`import CodeDiff from 'v-code-diff'`) for global registration via `app.use()` or `Vue.use()`.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

packagehttps://www.npmjs.com/package/v-code-diff ↗