Home
Other
Diff Viewer Plugin For Vue.js 3

Diff Viewer Plugin For Vue.js 3

hoiheart Added 4 years ago
Live Demo Download Source Code

Install & Download:

# NPM
$ npm i vue-diff --save

Description:

A Vue.js diff viewer plugin that can be used to compare the difference between the two code snippets.

Supported languages:

  • 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

How to use it:

1. Import and register the diff viewer.

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

2. Add the component to the template.

<Diff />

3. Available component props.

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. Extend the plugin with highlight.js.

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

Preview:

Diff Viewer Plugin For Vue.js

Changelog:

v1.2.4 (06/08/2022)

  • Bug Fixes

v1.2.3 (04/29/2022)

  • build

v1.2.2 (04/27/2022)

  • build

v1.2.0 (04/25/2022)

  • fix dependencies & CI

v1.1.5 (04/24/2022)

  • fix dependencies & CI

v1.1.4 (02/07/2022)

  • Update highlight.js major version

v1.1.3 (06/30/2021)

  • Add folding view

v1.1.2 (06/21/2021)

  • Bugfix: Virtual scroll options failed to change scrolling event after detection of change.

Add Comment