How to import CSV files in Vue.js with UseCSV

Guide

How to import CSV files in Vue.js with UseCSV

As a software developer, you may come across CSV files frequently. CSV is a data format that is old, full of quirks, and inconsistencies. Here are a few reasons why CSV files can be difficult to work with:

  • CSV files are often not well structured, making it hard to parse and interpret data.
  • CSV files can be large, making them difficult to manage and process.
  • CSV files can be prone to errors, making it difficult to trust data.

If you're a Vue.js developer looking to integrate CSV importing into your app, UseCSV can help you with that.

What is UseCSV?

If you work with data, you know that CSV files are a pain to work with. They're often hard to read and even harder to parse. That's where UseCSV comes in.

UseCSV is our product that lets you easily add CSV data import to your app. Supporting CSV and all Excel formats, UseCSV makes a versatile service that takes away all the headaches of building a solution in-house.

All you need is done for you and features include:

  • validation rule preconfiguration
  • security first platform for integration to keep data safe
  • ability to handle large import files
  • receive import data as a webhook or callback
  • automatic column matching
  • intuitive frontend CSV import experience

The best part about UseCSV is that you can begin using the platform for free and it comes with a generous free developer tier, allowing you and your team to test and experiment with the integration without restrictions.

Setting up your UseCSV account

To set up your free UseCSV developer account, simply follow this link - no credit card details required - just an email address or Gmail account. Once completed, you will be automatically directed to UseCSV dashboard.

This dashboard will give you an overview of your CSV importers, a link to the documentation, API keys, account settings, and billing. In the top right corner is the 'Add Importer' button. This button will give you the ability to create a new data model for your CSV imports.

01.png

To edit a current data model, click on the View button that is on the same row as your selected importer. When you create an account, there is a preconfigured importer called 'My First Importer'. Click on the View to configure your importer. Here is an example of what this looks like:

02.PNG

There are four main fields that are available within the importer and they are:

  • the 'Key' field - this field contains the API key for your specific importer.
  • the 'Name' field - this field lets you configure the name of your importer.
  • the 'Where to send uploaded data' dropdown - this lets you toggle between receiving CSV imports as a webhook to your backend, or locally as a callback.
  • the 'Webhook URL' field - this field lets you determine where your imported data is sent.

Beneath these four fields is the Column section. This section contains the data model for the importer. To add a new column, click on Add Column button located at the top of the Columns section. There is no limit to how many columns you can create.

Here is a screenshot of the Add Column interface for UseCSV.

03.png

That is basically it for UseCSV's configuration panel.

Add CSV import to your Vue.js app

Adding UseCSV to your Vue.js app is quite simple. All you have to do is install @usecsv/vuejs, import the plugin, and template the HTML to display the import button.

Without further ado, let's get into it.

Step 1: Install @usecsv/vuejs to your project

UseCSV can be installed to your project either via npm or through yarn.

Here is how to add UseCSV to vue.js via npm:

npm install @usecsv/vuejs

Here is how to install @usecsv/vuejs via yarn:

yarn add @usecsv/vuejs

Step 2: Add the importer to your app

After the installation has finished, you can import the library to your Vue.js component and use it.

For example:

import UsecsvButton from "@usecsv/vuejs"

Now that we have the library included as part of our project, we can use it to render in the HTML template.

Step 3: Render it in HTML

To render the import data button, you need to use usecvs-button. Within this tag, you can also set parameters for your importerKey and user.

The importerKey connects your UseCSV button to the target data model. The user option allows you to attach a JSON object that can contain any data you wish to pass through to your backend. This comes in useful for user data that can help you uniquely identify the import user.

<template>
    <usecsv-button importerKey="your-importer-key">
        Import Data
    </usecsv-button>
</template>

<script>
  import UseCSVButton from "@usecsv/vuejs";

  export default {
    name: "App",
    components: { "usecsv-button": UseCSVButton },
  };
</script>

And that's basically it!

What's left is for you to test the import button by clicking on it. This action should open a popup modal with your preconfigured data model and data requirements.

Receive data from imports

When it comes to Node.js, there are many ways to create a web server. In this article, we'll focus on creating a simple webserver to receive data.

We'll start by creating a file called server.js. In this file, we'll require the http module, which will give us access to the server functionality.

Next, we'll create a server using the http.createServer() method. This method takes a callback function as an argument. This callback function will be executed when the server receives a request.

The callback function takes two arguments: a request object and a response object. The request object contains information about the client's request, such as the URL, headers, and body. The response object is used to send data back to the client.

We can use the response.write() method to send data back to the client. This method can be called multiple times to send multiple pieces of data.

Finally, we'll call the response.end() method to end the response. This method must be called, or the client will never receive the response.

Here's the complete code for our simple web server:

var http = require("http"); http .createServer(function (request, response) { request.on("data", function (data) { console.log("data", JSON.parse(data)); }); response.statusCode = 200; response.write("Hello, CSV!"); response.end(); }) .listen(8080); console.log("Server running at http://localhost:8080/");

In this example, we've created a server that will respond to all requests with the string "Hello, CSV!".

This is just a basic example of how to create a web server in Node.js. For more information, check out the Node.js documentation.

Now that your code is ready, you can run your server by using the following command:

node server.js

To connect this webhook endpoint up with your UseCSV importer, you can use a free Cloudflare tunnel.

Start a Cloudflare tunnel:

cloudflared tunnel localhost:8080

If your Cloudflare commands are successful, you will get something like this:

2022-01-29T23:40:16Z INF Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps
2022-01-29T23:40:16Z INF Requesting new quick Tunnel on trycloudflare.com...
2022-01-29T23:40:17Z INF +--------------------------------------------------------------------------------------------+
2022-01-29T23:40:17Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2022-01-29T23:40:17Z INF |  https://wan-attract-tin-exposure.trycloudflare.com                                        |
2022-01-29T23:40:17Z INF +--------------------------------------------------------------------------------------------+

Use the tunnel link and paste it into the Webhook URL field to finish connecting everything up.

05.png

We're ready to try your first import

Make sure your Vue.js server is running with npm run . Go to your localhost and click on Import Data to open the importer modal.

Upload your CSV file, match the columns and then click import.

06.png

07.png

08.png

Watch your node.js console log for the webhook payload. UseCSV will automatically split up the webhooks into batches of 1,000 rows.

Where to from here?

The possibilities are endless when it comes to using UseCSV. With UseCSV, you can evade common issues like incorrect data formatting, parse errors, and incomplete data.

Plus, UseCSV is constantly being updated with the latest features and security patches, so you can rest assured that your application is always secure.

For more information about integrating UseCSV into your project, check out the documentation - or start using UseCSV today to experience how easy it is to get started.

Share this post