CSV importer and spreadsheet editor for Vue

<script setup lang="ts">
import { ref, onMounted } from "vue";
import "@updog/data-editor-wc";

const editorRef = ref<HTMLElement | null>(null);

onMounted(() => {
  editorRef.value?.configure({
    apiKey: "YOUR_API_KEY",
    columns: [
      { id: "name", title: "Name" },
      {
        id: "passport",
        title: "Passport",
        validators: [{ type: "required", message: "Passport is required" }],
      },
    ],
    onComplete: (result) => console.log(result),
  });
});

function open() {
  editorRef.value?.show();
}
</script>

<template>
  <button @click="open">Open Importer</button>
  <updog-editor ref="editorRef" />
</template>