HTML Encoder for Vue.js Developers

<script setup lang="ts">
import { ref, computed } from 'vue'

const input = ref('')
const mode = ref<'encode' | 'decode'>('encode')

const result = computed(() => {
  if (mode.value === 'encode') {
    const d = document.createElement('div')
    d.textContent = input.value
    return d.innerHTML
  } else {
    const d = document.createElement('div')
    d.innerHTML = input.value
    return d.textContent ?? ''
  }
})
</script>

<template>
  <select v-model="mode">
    <option value="encode">Encode</option>
    <option value="decode">Decode</option>
  </select>
  <textarea v-model="input" placeholder="Enter HTML or text..." />
  <pre>{{ result }}</pre>
</template>