How to Create a Vue.js CSV Data Importer in Two Minutes

Vue.js is an open-source MVVM front end JavaScript framework for building user interfaces and single-page applications.

With Vue.js applications, there are several ways to upload CSV files. And now, with Flatfile, the data import process is even simpler.

The new Flatfile Vue.js component handles all of the heavy lifting, letting companies import and manage CSV file data in minutes. Now let’s dig in and we’ll show you how.

Before we get started, let’s make sure to have a license key to use Flatfile. If you don’t have one already, you can sign up via GitHub.

Now, let’s get the new Flatfile Vue.js library installed in our applications:

or 

Now let’s head over to a Component we want to upload a CSV file in, and import FlatfileButton from @flatfile/vuejs, and add it into our components object.

Great! Now we’re able to use the new <flatfile-button /> anywhere in this component. To get started with the component, the only required inputs that need to be passed down are licenseKey (a String), settings (an Object), and customer (an Object containing userId which is required).

Make sure to enter in your licenseKey above and now, we have a very basic and default Flatfile Vue.js behavior in our applications!

In a mere few minutes, we set up CSV import functionality and can harness the power of Flatfile to handle all of our CSV data migration needs.

Note: In this example we’ve passed in some arbitrary data for both customer and settings. For the customer user Id, we passed in 12345 - but this could be any value for the current user (in your system). For settings, we passed in some demo data for both “type” and “fields”. Just know that these are fully customizable, and should be designed to suit the types of columns/fields we’re expecting from our CSV imports.

So what if we want to customize everything a bit further? Let’s take a look at some of the other optional properties and methods that can be passed down via <flatfile-button> props.

In the next example, we’re going to pass down a few optional values and methods via props. A fieldHooks object, that will run on the initialization of imports (between matching & review stages), and in our case we’ll set up a Field Hooks rule for the email field. With fieldHooks, we can do setup validation for columns, or even formatting data within a column (take for example, formatting a date column to transform the data in a specific way).

Next we’re going to pass down three methods to hook into lifecycle events in our import process. These prop methods we’ll be hooking into are: onData, onRecordInit, and onRecordChange. As the names imply, these are methods that we can pass down the Flatfile importer to fire off when these events occur. Lastly we’re passing down another optional prop methods available to us, and this is `onCancel`. As the name suggests, we can fire off our own method here, whenever a user cancels or exits the import process entirely.

In just a few minutes, we set up CSV import functionality in a Vue.js app, and can now harness the power of Flatfile to handle all of our CSV data needs. To view the Flatfile Vue.js importer in action, check out the Codesandbox demo here To view the code for the Flatfile Vue.js component, find it on GitHub