Code Diff Plugin For Vue 3/2

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:

Code Diff Plugin

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

You Might Be Interested In:

Add Comment