@git-diff-view/vue

@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

npm install @git-diff-view/vue
# or
pnpm add @git-diff-view/vue
# or
yarn add @git-diff-view/vue

Quick Start

Basic Usage

<script setup>
import { DiffView, DiffModeEnum } from "@git-diff-view/vue";
import "@git-diff-view/vue/styles/diff-view.css";

const diffData = {
  oldFile: { fileName: "old.ts", content: "..." },
  newFile: { fileName: "new.ts", content: "..." },
  hunks: ["..."]
};
</script>

<template>
  <DiffView
    :data="diffData"
    :diff-view-mode="DiffModeEnum.Split"
    diff-view-theme="dark"
    :diff-view-highlight="true"
  />
</template>

Advanced Usage with DiffFile

File Comparison Mode

<script setup>
import { DiffView } from "@git-diff-view/vue";
import { DiffFile, generateDiffFile } from "@git-diff-view/file";
import "@git-diff-view/vue/styles/diff-view.css";

const file = generateDiffFile(
  "old.ts", oldContent,
  "new.ts", newContent,
  "typescript", "typescript"
);
file.initTheme('dark');
file.init();
file.buildSplitDiffLines();
</script>

<template>
  <DiffView :diff-file="file" />
</template>

Git Diff Mode

<script setup>
import { DiffView } from "@git-diff-view/vue";
import { DiffFile } from "@git-diff-view/core";
import "@git-diff-view/vue/styles/diff-view.css";

const file = new DiffFile(
  oldFileName,
  oldContent,
  newFileName,
  newContent,
  hunks,
  oldFileLang,
  newFileLang
);
file.initTheme('dark');
file.init();
file.buildSplitDiffLines();
</script>

<template>
  <DiffView :diff-file="file" />
</template>

Styling

<script>
// Default styles with Tailwind (next release will be pure CSS)
import "@git-diff-view/vue/styles/diff-view.css";

// Pure CSS (no Tailwind conflicts)
import "@git-diff-view/vue/styles/diff-view-pure.css";
</script>

API Reference

Props

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

Slots

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

Events

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

DiffData Type

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