### Project Setup with Git and npm

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Clones the vue-diff-text repository from GitHub, navigates into the project directory, and installs all necessary Node.js dependencies using npm. This is the initial step to get the project running. Requires Node.js 18+.

```bash
git clone https://github.com/sitefinitysteve/vue-diff-text.git
cd vue-diff-text
npm install
```

--------------------------------

### Setting Up and Running the Demo App for Testing

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Prepares and launches the comprehensive Vue 3 demo application designed for testing. It installs demo-specific dependencies (if not already present) and then starts the demo server, enabling real-time text editing, comparison of diff types, and option testing.

```bash
cd demo
npm install  # First time only
npm run dev
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/demo/README.md

Installs all necessary Node.js packages and project dependencies defined in package.json.

```sh
npm install
```

--------------------------------

### Running the Demo Application for Development

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Navigates into the 'demo' directory and starts a development server with hot reload. This setup allows developers to see changes instantly when editing source files in `src/components/`, as Vite aliases point directly to them, bypassing a build step.

```bash
cd demo
npm run dev
```

--------------------------------

### Run Development Server with Hot-Reload

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/demo/README.md

Starts the development server, compiling and hot-reloading the application for local development and testing.

```sh
npm run dev
```

--------------------------------

### Testing the Built Version of vue-diff-text

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

First, builds the main project to create the distribution files. Then, it navigates to the 'demo' directory and starts the development server, which will now use the newly built components from the `dist/` folder. This is useful for verifying the production build.

```bash
npm run build
cd demo
npm run dev
```

--------------------------------

### Install Vue Diff Text Library

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Instructions for installing the `vue-diff-text` library using npm, which is the standard package manager for JavaScript projects.

```bash
npm install vue-diff-text
```

--------------------------------

### Compile and Minify for Production

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/demo/README.md

Builds the project for production, compiling and minifying all assets for optimal performance and deployment.

```sh
npm run build
```

--------------------------------

### vue-diff-text Project Directory Structure

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Illustrates the key directories and files within the vue-diff-text project. It highlights the location of source components, the test application, built output, and the project's package configuration file.

```bash
vue-diff-text/
├── src/
│   ├── components/          # The five diff components
│   └── index.ts            # Main entry point
├── demo/                   # Test app
├── dist/                   # Built files
└── package.json
```

--------------------------------

### Building the vue-diff-text Project

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Executes the build process for the vue-diff-text library. This command generates the final distribution files, including ES module, UMD bundle, TypeScript declarations, and CSS, which are placed in the `dist/` directory.

```bash
npm run build
```

--------------------------------

### npm Scripts for Project Management

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Lists the primary npm scripts available for managing the vue-diff-text project and its demo application. These scripts facilitate development, building, and previewing different versions of the project.

```APIDOC
Available scripts:
- npm run dev - Start dev server
- npm run build - Build for production
- npm run preview - Preview built version

For the demo (run from demo/):
- npm run dev - Start demo server
- npm run build - Build demo
- npm run preview - Preview built demo
```

--------------------------------

### Basic Usage of Vue Diff Text Components

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Demonstrates how to import and use the five different text diffing components (`DiffChars`, `DiffWords`, `DiffWordsWithSpace`, `DiffLines`, `DiffSentences`) in a Vue 3 application, providing `old-text` and `new-text` props for comparison.

```vue
<template>
  <div>
    <!-- Pick whichever diff type makes sense for your use case -->
    <DiffChars :old-text="oldText" :new-text="newText" />
    <DiffWords :old-text="oldText" :new-text="newText" />
    <DiffWordsWithSpace :old-text="oldText" :new-text="newText" />
    <DiffLines :old-text="oldText" :new-text="newText" />
    <DiffSentences :old-text="oldText" :new-text="newText" />
  </div>
</template>

<script setup>
import { DiffChars, DiffWords, DiffWordsWithSpace, DiffLines, DiffSentences } from 'vue-diff-text'

const oldText = "Hello world"
const newText = "Hello Vue world"
</script>
```

--------------------------------

### Project Dependencies

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Details the external libraries and their versions that vue-diff-text relies on. This includes Vue 3 as the core framework and the `diff` library, which performs the underlying text diffing operations.

```APIDOC
vue ^3.4.21 - Vue 3 framework
diff ^5.2.0 - The core diffing library by @kpdecker that does all the heavy lifting
```

--------------------------------

### Common jsdiff Options for Vue Diff Text

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Details common `jsdiff` options that can be passed to `vue-diff-text` components via the `options` prop. These include `ignoreCase` and `ignoreWhitespace` for general use, and `newlineIsToken` specifically for `DiffLines`, with a reference to the full `jsdiff` documentation for more details.

```APIDOC
For most components:
- ignoreCase: boolean (default: false) - If true, ignores case differences when comparing text.
- ignoreWhitespace: boolean (default: false) - If true, ignores whitespace differences when comparing text.

For DiffLines:
- newlineIsToken: boolean (default: false) - If true, treats newlines as separate tokens during comparison.
```

--------------------------------

### Passing jsdiff Options to Vue Diff Components

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Illustrates how to pass `jsdiff` specific options, such as `ignoreCase` and `ignoreWhitespace`, to the `vue-diff-text` components via the `options` prop for more granular control over the diffing process.

```vue
<template>
  <div>
    <!-- Ignore case differences -->
    <DiffWords 
      :old-text="oldText" 
      :new-text="newText" 
      :options="{ ignoreCase: true }"
    />
    
    <!-- Ignore whitespace when comparing lines -->
    <DiffLines 
      :old-text="oldText" 
      :new-text="newText" 
      :options="{ ignoreWhitespace: true }"
    />
  </div>
</template>

<script setup>
import { DiffWords, DiffLines } from 'vue-diff-text'

const oldText = "Hello WORLD"
const newText = "hello world"
</script>
```

--------------------------------

### Vue Diff Text Component Props Reference

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Documents the common properties accepted by all `vue-diff-text` components, including `old-text` (required original text), `new-text` (required new text), and `options` (optional `jsdiff` configuration object).

```APIDOC
old-text (required) - The original text string to compare.
new-text (required) - The new text string to compare against the old text.
options (optional) - An object containing any options to pass directly to the underlying jsdiff library.
```

--------------------------------

### Using Legacy TextDiff Component in Vue Diff Text

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Shows how to use the `TextDiff` component, which is an alias for `DiffWordsWithSpace`, for backward compatibility with older implementations of the library.

```vue
<template>
  <TextDiff :old-text="oldText" :new-text="newText" />
</template>

<script setup>
import { TextDiff } from 'vue-diff-text'

const oldText = "Hello world"
const newText = "Hello Vue world"
</script>
```

--------------------------------

### Advanced Styling with Direct CSS Classes for Vue Diff Text

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Shows how to apply more granular styling to the `vue-diff-text` components by targeting specific CSS classes like `.diff-added` and `.diff-removed` for added and removed text, respectively. The main container class is `.text-diff`.

```css
.diff-added {
  background-color: #e6ffed;
  color: #1b7332;
  font-weight: bold;
  border-radius: 3px;
  padding: 2px 4px;
}

.diff-removed {
  background-color: #ffe6e6;
  color: #d73a49;
  text-decoration: line-through;
  border-radius: 3px;
  padding: 2px 4px;
}
```

--------------------------------

### Customize Vue Diff Text Styling with CSS Variables

Source: https://github.com/sitefinitysteve/vue-diff-text/blob/main/README.md

Provides CSS variable definitions for easily customizing the background and text colors, as well as text decoration, for added and removed text elements within the `vue-diff-text` components. These variables can be overridden in your CSS.

```css
:root {
  --text-diff-added-bg: #e6ffed;
  --text-diff-added-color: #1b7332;
  --text-diff-removed-bg: #ffe6e6;
  --text-diff-removed-color: #d73a49;
  --text-diff-removed-decoration: line-through;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.