VCodeDiff

A code diff display plugin, available for Vue2 / Vue3. It is the vue3 version of vue-code-diff, refer to a lot of code, thanks here.

View Demo View Github

Installation

Install v-code-diff

# With NPM
npm i v-code-diff

# With Yarn
yarn add v-code-diff

Vue2 developers need install composition-api

yarn add @vue/composition-api

Getting started

Vue3

Register globally

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'"
      file-name="test.txt"
      output-format="side-by-side"/>
</template>

Register locally

in vue file


<template>
  <code-diff
      :old-string="'12345'"
      :new-string="'3456'"
      file-name="test.txt"
      output-format="side-by-side"/>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {CodeDiff} from 'v-code-diff'

export default defineComponent({
  components: {
    CodeDiff
  }
})
</script>

Vue2

Register globally

import Vue from 'vue';
import CodeDiff from 'v-code-diff'

Vue.use(CodeDiff);

Register locally


<template>
  <code-diff
      :old-string="'12345'"
      :new-string="'3456'"
      file-name="test.txt"
      output-format="side-by-side"/>
</template>
<script>
import {CodeDiff} from 'v-code-diff'

export default {
  name: 'App',
  components: {
    CodeDiff
  }
}
</script>

Events

Event Name Description Callback Params
before-render hook before rendering -
after-render hook after rendering -

Props

Prop Description Type Optional Default
highlight control whether to highlight the code boolean — true
old-string old string string — —
new-string new string string — —
context number of show context lines number — —
outputFormat show method string line-by-line，side-by-side line-by-line
drawFileList show files list boolean - false
renderNothingWhenEmpty render nothing when empty boolean - false
diffStyle difference style string word, char word
fileName file name string -
isShowNoChange show raw when no change boolean - false
trim Remove blank characters before and after the string boolean - false

Difference from vue-code-diff

  • Support vue3
  • Smaller package size
  • Faster rendering speed

Todo

  • [x] faster render