Vue-Diff-Match-Patch

Installation

// Using npm
npm install vue-diff-match-patch
// Using Yarn
yarn add vue-diff-match-patch

Examples

Below you will find some example usage:

Bar Chart

<template>
  <div>
      <h2>Diff</h2>
      <diff :left="text1" :right='text2'></diff>
      <h2>Line Diff</h2>
      <line-diff :left="text1" :right='text2'></line-diff>
      <h2>Semantic Diff</h2>
      <sem-diff :left="text1" :right='text2'></sem-diff>
      <h2>Processing Diff</h2>
      <processing-diff :left="text1" :right='text2'></processing-diff>
  </div>
</template>

<script>
import Diff from '@/components/Diff'
import LineDiff from '@/components/LineDiff'
import SemanticDiff from '@/components/SemanticDiff'
import ProcessingDiff from '@/components/ProcessingDiff'

export default {
  name: 'Demo',
  data: function () {
    return {
      text1: 'I am the very model of a modern Major-General, \n I\'ve information vegetable, animal, and mineral\n',
      text2: 'I am the very model of a cartoon individual,\n My animation\'s comical, unusual, and whimsical\n'
    }
  },
  components: {
    'diff': Diff,
    'line-diff': LineDiff,
    'sem-diff': SemanticDiff,
    'processing-diff': ProcessingDiff
  }
}
</script>