vue-diff

vue-diff

Vue diff viewer plugin

⚠️ This plugin supports only Vue3
Vue2 doesn't have a support plan yet.

Table of Contents

• Introduction
• Features
• Install plugin
  • Options
• Usage diff viewer
  • props
• Custom theme
• Extend languages
• Large text comparison

Introduction

You can see the difference between the two codes with the vue-diff plugin.
This plugin dependent on diff-match-patch and highlight.js, shows similar results to other diff viewers (e.g., Github Desktop).
Here is the demo

Features

• Support split / unified mode
• Support multiple languages and can be extended
• Support two themes (dark / light) and can be customized
• Virtual scroll for large text comparison
• Support IE11 (IE 11 support for Vue@3 is still pending)

Install plugin

npm install vue-diff

install plugin in vue application

import VueDiff from 'vue-diff'
// import VueDiff from 'vue-diff/dist/index.es5' // If need to use es5 build
import 'vue-diff/dist/index.css'

app.use(VueDiff)

Options

app.use(VueDiff, {
  componentName: 'VueDiff'
})

name	type	detault	description
componentName	string	Diff	Global diff component name

Usage diff viewer

Insert the diff component with props.

<template>
  <Diff
    :mode="mode"
    :theme="theme"
    :language="language"
    :prev="prev"
    :current="current"
  />
</template>

props

name	type	detault	values	description
mode	string	split	split, unified
theme	string	dark	dark, light	See Custom theme
language	string	plaintext		See Extend languages
prev	string	''		Prev code
current	string	''		Current Code

Custom theme

vue-diff uses the following highlight.js themes and can be customized.

• dark: highlight.js/scss/monokai.scss
• light: highlight.js/scss/vs.scss

npm install highlight.js

<template>
  <Diff
    :mode="mode"
    theme="custom"
    :language="language"
    :prev="prev"
    :current="current"
  />
</template>

<style lang="scss">
.vue-diff-theme-custom {
  @import 'highlight.js/scss/vs2015.scss'; // import theme

  background-color: #000; // Set background color
}
</style>

Extend languages

vue-diff supports the following languages and can be extended through highlight.js language registration.

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

npm install highlight.js

import VueDiff from 'vue-diff'
import 'vue-diff/dist/index.css'

// extend yaml language
import yaml from 'highlight.js/lib/languages/yaml'

VueDiff.hljs.registerLanguage('yaml', yaml)

app.use(VueDiff)

Check supported languages of Highlight.js

Large text comparison

⚠️ It's still hard to compare large texts. Virtual scroll for Vue3 must be created or found.