VueJS Diff Viewer Plugin

VueJS Diff Viewer Plugin

vue-diff Vue diff viewer plugin ⚠️ This plugin supports only Vue3 Vue2 doesn't have a support plan yet.

vue-diff

Vue diff viewer plugin

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

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). 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
  • Support IE11 (IE 11 support for [email protected] 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

Download Details:

Author: hoiheart

Source Code: https://github.com/hoiheart/vue-diff

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.