@git-diff-view/vue

> A high-performance Vue diff view component with GitHub-style UI


Features

- ✅ Split & Unified views
- ✅ Syntax highlighting with full context
- ✅ Light & Dark themes
- ✅ SSR support
- ✅ Vue 3 composition API
- ✅ Widget & extend data system with slots
- ✅ High performance with Web Worker support

Installation

``bash
npm install @git-diff-view/vue


or

pnpm add @git-diff-view/vue

or

yarn add @git-diff-view/vue
`

Quick Start

$3

`vue



`

$3

File Comparison Mode

`vue



`

Git Diff Mode

`vue



`

Styling

`vue

`

API Reference

$3

| Prop | Type | Description |
|------|------|-------------|
| data | DiffData | Diff data with oldFile, newFile, and hunks |
| diffFile | DiffFile | Pre-processed diff file instance |
| diffViewMode | Split \| Unified | View mode (default: Split) |
| diffViewTheme | light \| dark | Theme (default: light) |
| diffViewHighlight | boolean | Enable syntax highlighting |
| diffViewWrap | boolean | Enable line wrapping |
| diffViewFontSize | number | Font size in pixels |
| diffViewAddWidget | boolean | Enable widget button |
| extendData | ExtendData | Additional data per line |

$3

| Slot | Props | Description |
|------|-------|-------------|
| widget | { onClose, side, lineNumber } | Custom widget content |
| extend | { data } | Custom extend data content |

$3

| Event | Payload | Description |
|-------|---------|-------------|
| onAddWidgetClick | { side, lineNumber } | Fired when widget button is clicked |

$3

`typescript
type DiffData = {
oldFile?: {
fileName?: string | null;
fileLang?: string | null;
content?: string | null;
};
newFile?: {
fileName?: string | null;
fileLang?: string | null;
content?: string | null;
};
hunks: string[];
};
``

Examples

- Basic Vue Example
- Vue SSR Example

Live Demo

Try it online: https://mrwangjusttodo.github.io/git-diff-view

License

MIT © MrWangJustToDo