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:
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 }, trim: { type: Boolean, default: false }, language: { type: String, default: '' }, noDiffLineFeed: { type: Boolean, default: false }, syncScroll: { type: Boolean, default: true }
Preview:
Changelog:
04/27/2022
- v0.3.12: update
04/27/2022
- v0.3.11: feat: add prop syncScroll
02/21/2022
- v0.3.9: update
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