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:
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.
Download Details:
Author: hoiheart
Live Demo: https://hoiheart.github.io/vue-diff/demo/index.html
Download Link: https://github.com/hoiheart/vue-diff/archive/refs/heads/master.zip
Official Website: https://github.com/hoiheart/vue-diff
Install & Download:
# NPM
$ npm i vue-diff --save