Vue.js component to handle CSV uploads with field mapping.

VueCsvImport is a completely un-styled, customizable, and modular CSV mapping component. It allows you to upload a CSV, and map the CSV to pre-defined fields.
All markup and text can be replaced and/or customized. This is a complete rebuild for Vue 3 and will NOT work with your old markup from Vue 2.

This version is for Vue 3. Click here for Vue 2.

Demo

Installation

You can install the package via npm or yarn:

# npm
npm install vue-csv-import

# Yarn
yarn add vue-csv-import

You can import components individually.

import {VueCsvToggleHeaders, VueCsvSubmit, VueCsvMap, VueCsvInput, VueCsvErrors, VueCsvImport} from 'vue-csv-import';

Or import all as a plugin.

import {createApp} from "vue";
import App from "./App.vue";
import {VueCsvImportPlugin} from "vue-csv-import";

createApp(App)
    .use(VueCsvImportPlugin)
    .mount("#app");

A minimal working example with all components will look something like this:

<template>
    <vue-csv-import
        v-model="csv"
        :fields="{name: {required: false, label: 'Name'}, age: {required: true, label: 'Age'}}"
    >
        <vue-csv-toggle-headers></vue-csv-toggle-headers>
        <vue-csv-errors></vue-csv-errors>
        <vue-csv-input></vue-csv-input>
        <vue-csv-map></vue-csv-map>
    </vue-csv-import>
</template>

Components

• VueCsvImport - The primary component wrapper. All other components should be used within this component.
• VueCsvToggleHeaders - Toggles whether CSV should be read as having headers or not.
• VueCsvInput - The file input field to upload your CSV
• VueCsvMap - Used to map CSV columns to your fields
• VueCsvSubmit - Used to POST the mapped CSV.
• VueCsvErrors - Used to display errors.

VueCsvImport

Primary wrapper component.

<template>
    <vue-csv-import
        v-model="csv"
        :fields="{
            name: {
                required: false,
                label: 'Name'
            },
            age: {
                required: true,
                label: 'Age'
            }
        }"
    >
        <!-- Other Components -->
    </vue-csv-import>
</template>

Props:

Default text

{
    "errors": {
        "fileRequired" : "A file is required",
        "invalidMimeType" : "Invalid file type"
    },
    "toggleHeaders": "File has headers",
    "submitBtn": "Submit",
    "fieldColumn": "Field",
    "csvColumn": "Column"
}

Slot Props:

VueCsvToggleHeaders

Allows user to toggle whether the CSV has headers or not.

<template>
    <vue-csv-import>
        ...
        <vue-csv-toggle-headers></vue-csv-toggle-headers>
        ...
    </vue-csv-import>
</template>

Or with custom markup:

<template>
    <vue-csv-import>
        ...
        <vue-csv-toggle-headers v-slot="{hasHeaders, toggle}">
            <button @click.prevent="toggle">Has Headers</button>
        </vue-csv-toggle-headers>
        ...
    </vue-csv-import>
</template>

Props:

Slot Props:

VueCsvInput

The file field for importing CSV.

<template>
    <vue-csv-import>
        ...
        <vue-csv-input name="file"></vue-csv-input>
        ...
    </vue-csv-import>
</template>

Or with custom markup:

<template>
    <vue-csv-import>
        ...
        <vue-csv-input v-slot="{file, change}">
            ...
        </vue-csv-input>
        ...
    </vue-csv-import>
</template>

Props:

Slot Props:

VueCsvMap

Component to map the CSV to the specified fields.

<template>
    <vue-csv-import>
        ...
        <vue-csv-map></vue-csv-map>
        ...
    </vue-csv-import>
</template>

Or use slot for custom markup:

<template>
    <vue-csv-import>
        ...
        <vue-csv-map v-slot="{sample, map, fields}">
            ...
        </vue-csv-map>
        ...
    </vue-csv-import>
</template>

Props:

Slot Props:

VueCsvSubmit

Displays a button to post the CSV to specified URL.

<template>
    <vue-csv-import>
        ...
        <vue-csv-submit url="/post/here"></vue-csv-submit>
        ...
    </vue-csv-import>
</template>

Or use slot for custom markup:

<template>
    <vue-csv-import>
        <vue-csv-submit v-slot="{submit, mappedCsv}">
            <button @click.prevent="submit">Submit!!</button>
        </vue-csv-submit>
    </vue-csv-import>
</template>

Props:

Slot Props:

VueCsvErrors

Displays any error messages.

<template>
    <vue-csv-import>
        ...
        <vue-csv-errors></vue-csv-errors>
        ...
    </vue-csv-import>
</template>

Or use slot for custom markup:

<template>
    <vue-csv-import>
        ...
        <vue-csv-errors v-slot="{errors}">
            ...
        </vue-csv-errors>
        ...
    </vue-csv-import>
</template>

Slot Props:

Testing

npm run test

Changelog

Please see CHANGELOG for more information what has changed recently.

Security

If you discover any security related issues, please contact John Gile.

License

The MIT License (MIT). Please see License File for more information.

Credits

• John Gile
• All Contributors