
Product
Introducing Socket Fix for Safe, Automated Dependency Upgrades
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
v-code-diff
Advanced tools
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!
install v-code-diff
# npm
npm i v-code-diff
# yarn
yarn add v-code-diff
# pnpm
pnpm add v-code-diff
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>
<CodeDiff
old-string="12345"
new-string="3456"
output-format="side-by-side"
/>
</div>
</template>
import { createApp } from 'vue'
import CodeDiff from 'v-code-diff'
app
.use(CodeDiff)
.mount('#app')
then
<template>
<code-diff
old-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'
export default {
components: {
CodeDiff
}
}
</script>
<template>
<div>
<CodeDiff
old-string="12345"
new-string="3456"
output-format="side-by-side"
/>
</div>
</template>
import Vue from 'vue'
import CodeDiff from 'v-code-diff'
Vue.use(CodeDiff)
npm | cdn | |
---|---|---|
vue2 | vue2-cdn | |
vue2.7 | vue27-cdn | |
vue3 | vue3-cdn |
Prop | Description | Type | Optional Values | Default Value |
---|---|---|---|---|
language | Code language, such as typescript, defaults to plain text. View all supported languages | string | - | plaintext |
oldString | Old string | string | - | - |
newString | New string | string | - | - |
context | The number of lines to separate different parts so that they are not hidden | number | - | 10 |
outputFormat | Display mode | string | line-by-line,side-by-side | line-by-line |
diffStyle | Difference style, word-level differences or letter-level differences | string | word, char | word |
forceInlineComparison | Force inline comparison (word or char level) | boolean | - | false |
trim | Remove blank characters at the beginning and end of the string | boolean | - | false |
noDiffLineFeed | Don't diff Windows line feed (CRLF) and Linux line feed (LF) | boolean | - | false |
maxHeight | Maximum height of component, for example: 300px | string | - | undefined |
filename | Filename | string | - | undefined |
newFilename | New filename | string | - | undefined |
hideHeader | Hide header bar | boolean | - | false |
hideStat | Hide statistical part in the header bar | boolean | - | false |
theme | Add dark mode | ThemeType | light , dark | light |
ignoreMatchingLines | Give a pattern to ignore matching lines eg: '(time|token)' | string | - | undefined |
Name | Description | Type |
---|---|---|
diff | triggers when diff finished | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
Name | Description |
---|---|
stat | Custom statistical content, The scope parameter is { stat } |
In order to reduce the size of the packaged file, the system only supports the following commonly used languages by default.
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'
import c from 'highlight.js/lib/languages/c'
// Extend C language
hljs.registerLanguage('c', c)
export default {
components: {
CodeDiff,
}
}
</script>
<template>
<div>
<CodeDiff
old-string="#include <stdio.h>"
new-string="#include <stdio.h>\nint a = 1;"
output-format="side-by-side"
language="c"
/>
</div>
</template>
import CodeDiff from 'v-code-diff'
// Extend C language
import c from '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:
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.
Event Name | Change Status |
---|---|
before-render | No longer provided |
after-render | No longer provided |
Prop | Description | Change Status |
---|---|---|
highlight | Control code highlighting | Removed in version 1.x |
language | Code language | None |
oldString | Old string | None |
newString | New string | None |
context | The number of lines to separate different parts so that they are not hidden | None |
output-format | Display mode | None |
diffStyle | Difference style, word-level differences or letter-level differences | None |
drawFileList | Display file comparison list | Removed in version 1.x |
renderNothingWhenEmpty | Do not render when there is no comparison | Removed in version 1.x |
fileName | File name | To be determined, not under development |
newFilename | New in version 1. To be determined, not under development | |
isShowNoChange | Display source code when there is no comparison | Removed as it became the default in version 1.x |
trim | Remove blank characters at the beginning and end of the string | None |
noDiffLineFeed | Don't diff Windows line feed (CRLF) and Linux line feed (LF) | None |
theme | Add dark mode | New in version 1 |
FAQs
template component for vue-demi, can dev and build
The npm package v-code-diff receives a total of 6,503 weekly downloads. As such, v-code-diff popularity was classified as popular.
We found that v-code-diff demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Automatically fix and test dependency updates with socket fix—a new CLI tool that turns CVE alerts into safe, automated upgrades.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.