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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
CodeDiff
✓ import { CodeDiff } from 'v-code-diff'
✗ import CodeDiff from 'v-code-diff'
Use named import for local component registration, especially in Vue 3 setup scripts or Vue 2 component options.
CodeDiff
✓ import CodeDiff from 'v-code-diff';
// then Vue.use(CodeDiff) or app.use(CodeDiff)
✗ import { CodeDiff } from 'v-code-diff';
// then Vue.use({ CodeDiff })
For global plugin registration with `Vue.use()` or `app.use()`, the library exports itself as a default export.
CodeDiff
✓ import { CodeDiff } from 'v-code-diff'
✗ const CodeDiff = require('v-code-diff')
This library is primarily designed for ESM consumption. While bundlers handle CJS, direct `require` might not resolve correctly for named exports without specific configuration.
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 issues
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.fixRefer to the 'Migrate from 0.x version' section in the package README for specific guidance on adapting to the new API and component structure.
affects: >=1.0.0
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.fixRun `npm install @vue/composition-api` or `pnpm add @vue/composition-api` in your project if targeting Vue 2.x.
affects: >=1.0.0 (Vue 2.6.x to 2.7.x)
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()`.fixDouble-check your import statements and registration method against the documentation's 'Getting Started' section to match your usage (local vs. global, Vue 2 vs. Vue 3).
affects: >=1.0.0
Errors
Common errors & fixes
Error: Failed to resolve component: CodeDiff
The `CodeDiff` component was not correctly imported and registered in the Vue application (either locally within a component or globally as a plugin).
fixIf using locally: `import { CodeDiff } from 'v-code-diff'; components: { CodeDiff }`. If globally: `import CodeDiff from 'v-code-diff'; app.use(CodeDiff)`. Uncaught TypeError: app.use is not a function (for Vue 3 with named import) OR TypeError: Cannot read property 'use' of undefined (for Vue 2 with named import)
Attempting to use `app.use()` or `Vue.use()` with a named import (`{ CodeDiff }`) instead of the default export for global plugin registration.
fixChange the import for global registration to `import CodeDiff from 'v-code-diff'`.
The composition API is not enabled on the current version of Vue.
This error typically occurs in Vue 2.6.x applications where `@vue/composition-api` is required by `v-code-diff` but has not been installed or correctly initialized.
fixInstall `@vue/composition-api` (`npm i @vue/composition-api`) and ensure it's initialized in your Vue 2 entry file: `import Vue from 'vue'; import VueCompositionAPI from '@vue/composition-api'; Vue.use(VueCompositionAPI);`.
Audit
Dependencies
@vue/composition-apirequiredRequired for Vue 2.6+ users to enable Composition API features.
vuerequiredPeer dependency, supporting Vue 2.6.0+ or Vue 3.0.0+.