Vue Diff Viewer

Common errors

• Error: Failed to resolve component: Diff

  cause The `vue-diff` component has not been correctly registered with your Vue application instance.
  fix Ensure you have called `app.use(VueDiff);` (or `app.use(VueDiff, { componentName: 'YourComponentName' });`) in your main application file (e.g., `main.ts` or `main.js`) before mounting the app.

• Cannot find module 'vue-diff/dist/index.css' or its corresponding type declarations.

  cause The CSS styles for `vue-diff` were not imported, leading to missing styling for the diff viewer.
  fix Add `import 'vue-diff/dist/index.css';` to your main application entry file (e.g., `main.ts` or `main.js`) or within a global style sheet.

• Syntax highlighting is not working for specific languages.

  cause The language specified in the `language` prop is not supported by default, or `highlight.js` needs to be extended with the desired language.
  fix Check the list of default supported languages in the `vue-diff` documentation. If your language is not listed, refer to the 'Extend languages' section to register additional `highlight.js` languages.

Warnings

• breaking `vue-diff` is exclusively built for Vue 3. It will not function with Vue 2 applications, requiring a migration if coming from an older Vue version.
  Fix: Ensure your project is a Vue 3 application. If not, consider migrating to Vue 3 or finding a Vue 2 compatible diff library.
• gotcha The library has not received a major update since June 2022, suggesting it is in maintenance mode. While functional, expect slower bug fixes, feature additions, or updates to newer dependencies.
  Fix: Review the GitHub repository's issue tracker for active issues or known limitations before integrating into critical production paths. Be prepared to fork or contribute if specific new features or urgent bug fixes are needed.
• gotcha When customizing themes, ensure that the CSS variables or custom theme classes are correctly defined and provided. The `theme` prop accepts `'dark'`, `'light'`, or `custom${string}`. Incorrectly named custom themes will default to the fallback theme.
  Fix: Refer to the 'Custom theme' section in the documentation. Define your custom theme as a CSS class (e.g., `.my-custom-theme`) and pass its name (e.g., `'custommy-custom-theme'`) to the `theme` prop.

Install

• npm install vue-diff npm
• yarn add vue-diff yarn
• pnpm add vue-diff pnpm

Imports

• VueDiff
  wrong:

  const VueDiff = require('vue-diff');

  correct:

  import VueDiff from 'vue-diff';

  The library is designed for ESM; CommonJS `require` is not supported for importing the main component.
• CSS Styles
  wrong:

  import 'vue-diff/index.css';

  correct:

  import 'vue-diff/dist/index.css';

  The CSS entry point is specifically within the 'dist' folder.
• Vue Application Plugin
  wrong:

  new Vue().use(VueDiff);

  correct:

  app.use(VueDiff);

  Vue 3 plugin installation uses `app.use()` on the application instance, not a global `Vue` constructor.

Quickstart

This quickstart demonstrates how to install and register `vue-diff` as a Vue 3 plugin, then use the `<Diff>` component to display a side-by-side comparison of two TypeScript code snippets with dark theme and virtual scrolling.

import { createApp } from 'vue';
import VueDiff from 'vue-diff';
import 'vue-diff/dist/index.css';

const app = createApp({
  template: `
    <div style="padding: 20px;">
      <h1>Code Diff Example</h1>
      <Diff
        mode="split"
        theme="dark"
        language="typescript"
        :prev="prevCode"
        :current="currentCode"
        :virtual-scroll="{ height: 300, lineMinHeight: 24, delay: 100 }"
      />
    </div>
  `,
  setup() {
    const prevCode = `
      function hello(name: string) {
        console.log('Hello, ' + name + '!');
        const age = 30;
        return name + age;
      }
    `;
    const currentCode = `
      function greeting(name: string) {
        console.log('Hi, ' + name + '!');
        const city = 'New York';
        return `Welcome, ${name} from ${city}`;
      }
    `;
    return { prevCode, currentCode };
  }
});

app.use(VueDiff, { componentName: 'Diff' });
app.mount('#app');