https://github.com/rexskz/json-diff-kit-vue
The Vue version of Viewer used by json-diff-kit. (Beta)
https://github.com/rexskz/json-diff-kit-vue
diff json vue
Last synced: 5 months ago
JSON representation
The Vue version of Viewer used by json-diff-kit. (Beta)
- Host: GitHub
- URL: https://github.com/rexskz/json-diff-kit-vue
- Owner: RexSkz
- License: mit
- Created: 2024-04-28T17:18:56.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2025-01-23T03:15:42.000Z (over 1 year ago)
- Last Synced: 2025-04-05T23:33:07.787Z (over 1 year ago)
- Topics: diff, json, vue
- Language: Vue
- Homepage: https://json-diff-kit.js.org/
- Size: 40 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JSON Diff Kit Viewer (Vue)
[![NPM version][npm-image]][npm-url]
[![Downloads][download-badge]][npm-url]
The Vue version of `Viewer` used by `json-diff-kit`. For more documents and usages, please refer to the [json-diff-kit's main repository](https://github.com/RexSkz/json-diff-kit/) as well as [the playground (React version)](https://json-diff-kit.js.org/).
## Installation
```bash
# using npm
npm i @json-diff-kit/viewer-vue --save
# using yarn
yarn add @json-diff-kit/viewer-vue
# using pnpm
pnpm add @json-diff-kit/viewer-vue
```
## Usage
```vue
import { Differ, Viewer } from '@json-diff-kit/viewer-vue';
import type { DifferOptions, ViewerProps } from '@json-diff-kit/viewer-vue';
const differProps: DifferOptions = {
detectCircular: false,
maxDepth: Infinity,
showModifications: true,
arrayDiffMethod: 'lcs',
ignoreCase: false,
recursiveEqual: true,
preserveKeyOrder: true,
};
const differ = new Differ(differProps);
const before = { a: 1, b: 2, c: 3 };
const after = { a: 1, b: 3, d: 4 };
const diff = differ.diff(before, after);
const viewerProps: Partial<ViewerProps> = {
diff,
indent: 2,
lineNumbers: true,
highlightInlineDiff: true,
inlineDiffOptions: {
mode: 'word',
wordSeparator: ' ',
},
hideUnchangedLines: true,
syntaxHighlight: { theme: 'monokai' },
};
/* If syntax highlight is enabled, you should import a theme file, or write it by yourself. */
@import 'json-diff-kit/dist/viewer-monokai.css';
```
## License
MIT
[npm-url]: https://npmjs.org/package/json-diff-kit-vue
[npm-image]: https://img.shields.io/npm/v/json-diff-kit-vue.svg
[download-badge]: https://img.shields.io/npm/dm/json-diff-kit-vue.svg