SQL Formatter for Vue.js Developers

<script setup lang="ts">
import { ref } from 'vue'
import { format } from 'sql-formatter' // npm install sql-formatter

const input = ref('')
const output = ref('')
const dialect = ref<'postgresql'|'mysql'|'sqlite'>('postgresql')

function formatSQL() {
  try {
    output.value = format(input.value, {
      language: dialect.value,
      tabWidth: 2,
      keywordCase: 'upper',
    })
  } catch (e: any) {
    output.value = 'Invalid SQL: ' + e.message
  }
}
</script>

<template>
  <select v-model="dialect">
    <option value="postgresql">PostgreSQL</option>
    <option value="mysql">MySQL</option>
    <option value="sqlite">SQLite</option>
  </select>
  <textarea v-model="input" />
  <button @click="formatSQL">Format</button>
  <pre>{{ output }}</pre>
</template>