Vue diff viewer plugin that can be used to compare the difference between code snippets. You can see the difference between the two icons using the vue-diff plugin.

vue diff viewer example, javascript diff online, diff2html, javascript text diff, text diff npm, javascript diff objects, markdown diff tool

Features

• Support split/combined mode
• Support for multiple languages can be extended
• Support two themes (dark/light) and can be customized
• Default scroll to compare large text
• Folding width (partial folding not supported)

How to make use of it:

Install and download:

# NPM
$ npm i vue-diff --save

1. Import and register a different viewer.

import VueDiff from 'vue-diff'
import 'vue-diff/dist/index.css'
app.use(VueDiff);

2. Add the component to the template.

<Diff />

3. Component props available.

mode: {
  type: String as PropType<Mode>,
  default: 'split' // or unified
},
theme: {
  type: String as PropType<Theme>,
  default: 'dark' // or light
},
language: {
  type: String,
  default: 'plaintext'
},
prev: {
  type: String,
  default: ''
},
current: {
  type: String,
  default: ''
},
inputDelay: {
  type: Number,
  default: 0
},
virtualScroll: {
  type: [Boolean, Object] as PropType<boolean|VirtualScroll>,
  default: false
}

4. Expand the plugin with Highlight.js.

// register a new language
import yaml from 'highlight.js/lib/languages/yaml'
VueDiff.hljs.registerLanguage('yaml', yaml)

Default supported languages and values

• css
• xml: xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
• markdown: markdown, md, mkdown, mkd
• javascript: javascript, js, jsx
• json
• plaintext: plaintext, txt, text
• typescript: typescript, ts

Props

Diff Viewer Plugin, vue-diff Github

See Demo And Download

Official Website(hoiheart): Click Here

This superior jQuery/javascript plugin is developed by hoiheart. For extra Advanced usage, please go to the official website.