Diff Checker for Vue.js Developers

<script setup lang="ts">
import { ref, computed } from 'vue'
import * as Diff from 'diff' // npm install diff @types/diff

const text1 = ref('Hello World
Line 2
End')
const text2 = ref('Hello Vue
Line 2
New line
End')

const changes = computed(() => Diff.diffLines(text1.value, text2.value))
</script>

<template>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
    <textarea v-model="text1" />
    <textarea v-model="text2" />
  </div>
  <pre>
    <span v-for="(c, i) in changes" :key="i"
      :style="{ color: c.added ? 'green' : c.removed ? 'red' : 'inherit' }"
    >{{ c.value }}</span>
  </pre>
</template>