JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 10095
  • Score
    100M100P100Q161279F
  • License ISC

Vue diff viewer

Package Exports

  • vue-diff

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-diff) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-diff

Vue diff viewer plugin

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

Table of Contents

Introduction

screenshot

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

Features

  • Support split / unified mode
  • Support some languages and can be extended
  • Support two themes (dark / light) and can be customized
  • 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.

  • css
  • xml
  • markdown
  • javascript
  • json
  • plaintext
  • typescript
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)