Get started

Vue 3 CSV importer

Add CSV imports to Vue 3 with @csvjetty/vue, including validation, inline corrections and callback delivery.

On this page

Install Receive imported records Lifecycle and configuration

Add the hosted CSVJetty importer to Vue 3.3 or later with @csvjetty/vue. The component uses the JavaScript SDK and has no React dependency.

Install

BASH

npm install @csvjetty/vue

Receive imported records

Create an importer in the dashboard and supply its public key. Your backend must authenticate requests and validate writes.

HTML

<script setup>import { ref } from "vue";import CSVJetty from "@csvjetty/vue";
const rows = ref([]);async function saveData({ rows: batch, importId, rowNumbers }) {  const response = await fetch("/api/contacts/import", {    method: "POST",    headers: { "Content-Type": "application/json" },    body: JSON.stringify({ rows: batch, importId, rowNumbers }),  });  if (!response.ok) throw new Error("Could not save contacts.");  const body = await response.text();  const result = body ? JSON.parse(body) : undefined;  rows.value = batch;  return result;}</script>
<template>  <CSVJetty importer-key="YOUR_PUBLIC_IMPORTER_KEY" :on-data="saveData">    Import contacts  </CSVJetty>  <pre>{{ rows }}</pre></template>

Pass onData as a function prop using :on-data, rather than @data. The SDK awaits its result. Return nothing or an errors array with original row numbers; throw to report a save failure. Listen for @complete, @close and @error events.

Callback payload and row errors

Lifecycle and configuration

The component accepts importerKey, demo, columns, baseUrl, previewToken, autoOpen, accentColor and onData. Use demo without an importer key for the hosted keyless preview. Webhook delivery is configured in the dashboard.

The default slot supplies button text. A trigger slot receives open, close, isOpen and error for a custom button. A template ref also exposes these values. close() respects busy state and asks before discarding changes. Unmounting removes the importer immediately and cannot cancel a save already running in your app.

Server rendering does not open the importer or access browser APIs. autoOpen runs once after client mounting. Configuration changes apply on the next opening; delivery callbacks use current prop values.

Angular

JavaScript