Vue.js

Add a complete CSV and Excel importer to your Vue.js app, with column mapping, real-time validation, and API integration built in.

Installation

Install both packages:

1npm install @importok/javascript @importok/vue

Note: The trial version is available on NPM. When you upgrade, you'll get access to our private packages with full features. No code changes required.

Your first importer

Create a basic contact importer:

 1<script>
 2import ImportokWizard from "@importok/vue";
 3 
 4export default {
 5  components: {
 6    ImportokWizard
 7  },
 8 
 9  data() {
10    return {
11      fields: {
12        first_name: { label: 'First Name' },
13        last_name: { label: 'Last Name' },
14        email: { label: 'Email' },
15        phone: { label: 'Phone' },
16        country: { label: 'Country' }
17      }
18    };
19  }
20};
21</script>
22<template>
23  <ImportokWizard
24    title="Import Contacts"
25    :fields="fields"
26  />
27</template>

That's it. Users can now upload CSV or Excel files and map columns to your fields.

Make it production-ready

Add data transformations

Clean up data before validation using transformers:

 1data() {
 2  return {
 3    fields: {
 4      first_name: {
 5        label: 'First Name',
 6        transformers: 'trim|capitalize'  // Built-in transformers
 7      },
 8      last_name: {
 9        label: 'Last Name',
10        transformers: 'trim|capitalize'
11      },
12      email: {
13        label: 'Email',
14        transformers: 'trim'
15      }
16    }
17  };
18}

See all built-in transformers →

Add validation rules

Catch errors before they reach your API using validators:

 1data() {
 2  return {
 3    fields: {
 4      first_name: {
 5        label: 'First Name',
 6        transformers: 'trim|capitalize'
 7      },
 8      last_name: {
 9        label: 'Last Name',
10        transformers: 'trim|capitalize',
11        validators: 'required'  // Built-in validators
12      },
13      email: {
14        label: 'Email',
15        transformers: 'trim',
16        validators: 'email|required'
17      }
18    }
19  };
20}

See all built-in validators →

Connect to your API

Send validated data to your backend:

 1methods: {
 2  async saveRecords(records, meta) {
 3    const response = await fetch('/api/contacts/imports', {
 4      method: 'POST',
 5      headers: { 'Content-Type': 'application/json' },
 6      body: JSON.stringify(records)
 7    });
 8 
 9    return response;
10  }
11}

Complete example

Here's everything together:

 1<script>
 2export default {
 3  components: {
 4    ImportokWizard
 5  },
 6 
 7  methods: {
 8    async saveRecords(records, meta) {
 9      const response = await fetch('/api/contacts/imports', {
10        method: 'POST',
11        headers: { 'Content-Type': 'application/json' },
12        body: JSON.stringify(records)
13      });
14 
15      return response;
16    }
17  },
18 
19  data() {
20    return {
21      fields: {
22        first_name: {
23          label: 'First Name',
24          transformers: 'trim|capitalize'
25        },
26        last_name: {
27          label: 'Last Name',
28          transformers: 'trim|capitalize',
29          validators: 'required'
30        },
31        email: {
32          label: 'Email',
33          transformers: 'trim',
34          validators: 'email|required'
35        }
36      }
37    };
38  }
39};
40</script>
41<template>
42  <ImportokWizard
43    title="Import Contacts"
44    :fields="fields"
45    @import-ready="saveRecords"
46  />

Next steps

Now that you have a working importer, explore advanced features:

• Custom validators - Add business-specific validation rules
• Custom transformers - Create domain-specific data cleanup
• Data providers - Connect dropdowns to your API
• Props & events - Customize behavior and styling
• Field configuration - Deep dive into field options

Try it live

Experiment with a complete example in StackBlitz: Open in StackBlitz →

Trial limitations

The free trial includes:

• ✅ Full UI and mapping features
• ✅ Built-in validators and transformers
• ⚠️ 20 records per import (unlimited on paid plans)
• ⚠️ Up to 2 custom validators (unlimited on paid plans)
• ⚠️ Up to 2 custom transformers (unlimited on paid plans)
• ⚠️ Up to 2 data providers (unlimited on paid plans)

When you're ready, upgrade to unlock full features with access to our private packages.