Description:
A Vue 3/2 code diff plugin for developers.
Features:
- line-by-line or side-by-side output format.
- highlights the differences between strings by characters or words.
- line numbers
How to use it:
1. Import the Code Diff Plugin.
import {createApp} from 'vue'
import CodeDiff from 'v-code-diff'2. Register the plugin.
app
.use(CodeDiff)
.mount('#app')3. Add the code diff component to the template and define the old/new strings as follows:
<template>
<code-diff
:old-string="'Old String'"
:new-string="'New String'"
file-name="test.txt" />
</template>4. Available props.
highlight: {
type: Boolean,
default: true
},
oldString: {
type: String,
default: ''
},
newString: {
type: String,
default: ''
},
context: {
type: Number,
default: 10
},
outputFormat: {
type: String as PropType<'line-by-line' | 'side-by-side'>,
default: 'line-by-line'
},
drawFileList: {
type: Boolean,
default: false
},
renderNothingWhenEmpty: {
type: Boolean,
default: false
},
diffStyle: {
type: String as PropType<'word' | 'char'>,
default: 'word'
},
fileName: {
type: String,
default: ''
},
isShowNoChange: {
type: Boolean,
default: false
}Preview:
Changelog:
11/21/2021
- v0.3.6: update
11/14/2021
- v0.3.4: support sync scroll when outputFormat is side-by-side
09/11/2021
- v0.3.4: feat: add prop trim
Download Details:
Author: Shimada666
Live Demo: https://github.com/Shimada666/v-code-diff/archive/refs/heads/master.zip
Download Link: https://github.com/Shimada666/v-code-diff/archive/refs/heads/master.zip
Official Website: https://github.com/Shimada666/v-code-diff
Install & Download:
# Yarn
$ yarn add v-code-diff
# NPM
$ npm i v-code-diff --save