A CSV importer that feels like a Vue component.
Register CSVBoxButton once, bind the props you already know, and get validated rows in a callback. @csvbox/vuejs ships demos for both Vue 2 and Vue 3, and works in Nuxt when rendered client-side.
- Under 10 lines to first import
- Validated rows only
- SOC 2 Type II + GDPR
npm install @csvbox/vuejs<template>
<div id="app">
<CSVBoxButton
:licenseKey="licenseKey"
:user="user"
:onImport="onImport">
Upload File
</CSVBoxButton>
</div>
</template>
<script>
import { CSVBoxButton } from '@csvbox/vuejs'
export default {
name: 'App',
components: { CSVBoxButton },
data: () => ({
licenseKey: 'YOUR_LICENSE_KEY_HERE',
user: { user_id: 'default123' },
}),
methods: {
onImport(result, data) {
if (result) {
console.log(data.row_success + ' rows uploaded')
} else {
console.log('fail')
}
},
},
}
</script>The Vue SDK is a single component with bound props. There is no plugin to register globally, no store module, and no directive — you import CSVBoxButton, bind a license key and a user, and hand it a callback.
Everything that would normally make an importer a multi-week project — header matching, type coercion, row-level validation, an error-correction UI your users can actually operate — runs inside CSVbox rather than inside your app. Your Vue bundle only ever contains the button.
That split is also why the integration ages well. When your schema gains a column, you change it in the dashboard. The component you shipped keeps working.
- Demos for both Vue 2 and Vue 3 — the Options API snippet works in either
- One component, ordinary bound props, no plugin registration
- Nuxt supported when the button renders client-side
- Column and validation changes never touch your Vue build
How it works
- 1Install the package
Run npm install @csvbox/vuejs. It is a thin wrapper — the importer itself loads at runtime, so your bundle barely moves.
- 2Define your sheet
Set your columns, data types, and validation rules in the CSVbox dashboard, then copy the license key for that sheet.
- 3Register the component
Import CSVBoxButton and add it to your components object, then drop <CSVBoxButton> anywhere in your template.
- 4Handle onImport
Bind :onImport to a method. It receives (result, data) — read data.row_success to refresh your view or show a confirmation.
Register it once and drop <CSVBoxButton> anywhere in your template. Nuxt works too — render it client-side.
CSVBoxButton props
| Prop | Type | What it does |
|---|---|---|
licenseKey | string | The sheet key from your CSVbox dashboard. Required. |
user | object | Attributes attached to the import. user_id is mandatory; anything else is echoed back to your destination. |
onImport | function | Fires when an import finishes. Receives (result, data) — result is a boolean, data carries the row counts. |
options | object | Per-import overrides — row limits, language, theme, custom request headers, and more. |
lazy | boolean | Defer loading the importer until the button is clicked. |
onReady | function | Fires when the importer is loaded and ready to open. |
onSubmit | function | Fires when the user submits their file, before processing completes. |
onClose | function | Fires when the user dismisses the modal. |
Vue 3 with the Composition API
<template>
<CSVBoxButton
:licenseKey="licenseKey"
:user="user"
:lazy="true"
:onImport="onImport">
Import customers
</CSVBoxButton>
</template>
<script setup>
import { ref } from 'vue'
import { CSVBoxButton } from '@csvbox/vuejs'
const licenseKey = 'YOUR_LICENSE_KEY_HERE'
const user = ref({ user_id: 'default123' })
const rowsImported = ref(0)
function onImport(result, data) {
if (result) {
rowsImported.value = data.row_success
}
}
</script>The props are the same in both APIs. Use <script setup> on Vue 3 if that is your house style, or keep the Options API snippet above — it runs unchanged on Vue 2 and Vue 3.
Vue 2, Vue 3, and Nuxt
The package ships demos for both major Vue versions, and the prop names do not change between them.
Works with the Options API and with <script setup>. Register the component locally and bind the props.
The Options API example is the reference implementation — components object, data, methods.
The importer is browser-only. Render it inside <ClientOnly> so it never runs during server rendering.
No configuration needed. Install the package and import the component.
Common use cases
Let a new customer upload their existing records the moment they sign up, instead of waiting on your team to load the file.
Merchants refresh products, prices, and stock levels from the spreadsheet they already maintain.
A weekly file from a supplier is validated and delivered to your backend without anyone opening it first.
Give your ops team a validated bulk-edit path inside the admin app they already use.
Vue.js import questions, answered
Does the SDK support Vue 2 and Vue 3?
Yes. The package ships demos for both, and the prop names are the same in either. The Options API snippet on this page runs unchanged on Vue 2 and Vue 3.
How do I use it in Nuxt?
Wrap the button in <ClientOnly>. The importer runs in the browser, so it must not render during server rendering — once the page hydrates it behaves exactly as in a plain Vue app.
Can I use it with <script setup>?
Yes. Import CSVBoxButton inside <script setup> and bind the same props. Nothing about the component changes between the Options API and the Composition API.
How do I keep the importer off my initial page load?
Set the lazy prop. The importer bundle is then fetched when the user clicks the button rather than when the page loads, and onReady tells you when it is available.
How do I attach tenant or workspace context?
Add it to the user object. user_id is mandatory, and any additional attributes you include travel with the import and reach your destination alongside the rows.
Do I redeploy when the schema changes?
No. Columns and validation rules are configured in the CSVbox dashboard, so they change independently of your Vue build.
Vue.js picks the SDK. Your back end picks the destination.
The SDK you install has nothing to do with where the data lands. Whatever you run server-side — Node, Rails, Django, Laravel, Go, .NET, or no server at all — CSVbox delivers validated rows to your webhook, database, or no-code tool.