A code diff display plugin, available for Vue2 / Vue3.

English | 简体中文

Old Version:

0.x version, latest version 0.3.12 (traditional version, improved based on vue-code-diff, is no longer maintained. We will try to align the functionality of 0.x version in 1.x version and minimize migration cost as much as possible). This project references the following projects, and I would like to express my gratitude to the original authors!

• vue-diff
• vue-code-diff
• Github Code Diff

• Install
• Getting started
  • Vue3
  • Vue2
• Props
• Events
• Demo
• Extend languages
• Migrate from 0.x version

install v-code-diff

# npm npm i v-code-diff # yarn yarn add v-code-diff # pnpm pnpm add v-code-diff

⚠️ Important: If you are using pnpm 10.x, you need to add the following configuration to your package.json:

{ "pnpm": { "onlyBuiltDependencies": ["v-code-diff"] } }

This is because pnpm 10.x blocks postinstall scripts by default, while v-code-diff relies on postinstall scripts to select the appropriate build artifacts for Vue version compatibility. For more details, see pnpm/pnpm#8897.

Vue2.6 developers need install composition-api

pnpm add @vue/composition-api

Recommend using local registration for better tree-shaking support.

<script setup>import { CodeDiff } from'v-code-diff'</script> <template> <div> <CodeDiffold-string="12345"new-string="3456"output-format="side-by-side" /> </div> </template>

import{createApp}from'vue'importCodeDifffrom'v-code-diff'app.use(CodeDiff).mount('#app')

then

<template> <code-diffold-string="12345"new-string="3456"output-format="side-by-side" /> </template>

Recommend using local registration for better tree-shaking support.

<script>import { CodeDiff } from'v-code-diff'exportdefault { components: { CodeDiff }}</script> <template> <div> <CodeDiffold-string="12345"new-string="3456"output-format="side-by-side" /> </div> </template>

importVuefrom'vue'importCodeDifffrom'v-code-diff'Vue.use(CodeDiff)

In order to reduce the size of the packaged file, the system only supports the following commonly used languages by default.

• plaintext
• xml/html
• javascript
• json
• yaml
• python
• java
• bash
• sql

If the language you need is not included, you can manually import the relevant language highlighting module.

pnpm add highlight.js

Recommend using local registration for better tree-shaking support.

<script>import { CodeDiff, hljs } from'v-code-diff'importcfrom'highlight.js/lib/languages/c'// Extend C languagehljs.registerLanguage('c', c)exportdefault { components: { CodeDiff, }}</script> <template> <div> <CodeDiffold-string="#include <stdio.h>"new-string="#include <stdio.h>\nint a = 1;"output-format="side-by-side"language="c" /> </div> </template>

importCodeDifffrom'v-code-diff'// Extend C languageimportcfrom'highlight.js/lib/languages/c'CodeDiff.hljs.registerLanguage('c',c)

The v-code-diff 1.x version has features such as reduced packaging size and improved performance compared to the 0.x version. And we will try to align the functions with the 0.x version as much as possible to reduce your migration cost.

Key points:

• In the 1.x version, language recognition and highlighting will no longer be automatically performed, you need to manually specify the language type, such as language="python", if not specified, it will default to plaintext and will not be highlighted.
• In the 1.x version, due to the fact that rendering and highlighting are performed at the same time, the component events have been removed.
• In the 1.x version, the following component properties (Prop) have been changed:
  • highlight - removed
  • drawFileList - removed
  • fileName - rename to "filename"
  • newFilename - new
  • theme - new

Below is a detailed comparison of the two versions, you can refer to it to complete the migration.

The component events are no longer provided in the 1.x version as rendering and highlighting are carried out simultaneously.