Home
Other
Code Diff Plugin For Vue 3/2

Code Diff Plugin For Vue 3/2

Shimada666 First listed on March 20, 2024
Live Demo Download Source Code

Install & Download:

# Yarn
$ yarn add v-code-diff
# NPM
$ npm i v-code-diff --save

Description:

A Vue 3/2 code diff plugin for developers. Based on highlight.js.

Features:

  • line-by-line or side-by-side output format.
  • highlights the differences between strings by characters or words.
  • line numbers

How to use it:

1. Import the Code Diff Plugin.

import {createApp} from 'vue'
import CodeDiff from 'v-code-diff'

2. Register the plugin.

app
  .use(CodeDiff)
  .mount('#app')

3. Add the code diff component to the template and define the old/new strings as follows:

<template>
  <code-diff
    :old-string="'vuescript'"
    :new-string="'JavaScript'"
    output-format="side-by-side"/>
</template>

4. Available component props.

language: 'plaintext', // highlight.js languages
context: 10,
diffStyle: 'word', // or 'char'
outputFormat: 'line-by-line', // or 'side-by-side'
trim: false,
noDiffLineFeed: false,
maxHeight: undefined,
filename: undefined,
newFilename: undefined,
hideHeader: false,
hideStat: false,
theme: 'light',
ignoreMatchingLines: undefined,

Preview:

Code Diff Plugin

Changelog:

v1.11.0 (03/20/2024)

  • Add i18n
  • Remove useless code
  • Support force inline comparison & update demo
  • Bug Fixes

v1.10.0 (03/06/2024)

  • Support local registration
  • Add prepublishOnly script

v1.9.0 (01/19/2024)

  • Add stat slot

v1.8.0 (12/18/2023)

  • Add scope for stat slot
  • Add ignoreMatchingLines prop support
  • Add ignoreMatchingLines prop support for line-by-line mode
  • Bug Fixes

v1.7.1 (08/14/2023)

  • Fixed diff problem in split mode

v1.7.0 (08/10/2023)

  • Add hide filename & hide stat props
  • Add support for single-sided copy

v1.6.2 (08/02/2023)

  • Use ‘fs’ and ‘path’ instead of ‘node:fs’ and ‘node:path’

v1.6.1 (07/31/2023)

  • Use fs instead of node:fs in the postinstall script

v1.6.0 (07/31/2023)

  • Update & Bugfix

v1.5.1 (06/25/2023)

  • feat: add compatibility for undefined input data

v1.4.0 (05/26/2023)

  • Expanding folded lines

v1.4.0 (04/27/2023)

  • Add support for CDN

v1.3.2 (04/24/2023)

  • Bugfix
  • Add missing box-sizing CSS property

v1.3.1 (03/27/2023)

  • Bugfix

v1.3.0 (02/22/2023)

  • Optimize rendering performance for large text

v1.2.0 (02/20/2023)

  • Change color of folding line to blue
  • Support prop filename
  • Bugfix

02/13/2023

  • v1.1.0: Add maxHeight prop and adjust css

04/27/2022

  • v0.3.12: update

04/27/2022

  • v0.3.11: feat: add prop syncScroll

02/21/2022

  • v0.3.9: update

11/21/2021

  • v0.3.6: update

11/14/2021

  • v0.3.4: support sync scroll when outputFormat is side-by-side

09/11/2021

  • v0.3.4: feat: add prop trim
Tags:

Add Comment