Getting Started

Let's integrate the UseCSV Importer plugin with your Vue.js app.

Make sure you configured your importer before starting.

Install

Using NPM

Vue 2

npm install @usecsv/vuejs

Vue 3

npm install @usecsv/vuejs3

Using YARN

Vue 2

yarn add @usecsv/vuejs

Vue 3

yarn add @usecsv/vuejs3

Add the Importer

Adding the UseCSVButton component to your frontend will render a button that triggers the import modal when clicked.

Additional metadata can be passed in the user prop, and this will be passed back to your app in the JSON webhook when data is imported. It's a good idea to include a userId or similar identifying data, so you can correctly identfiy and import the data into your app. Check more details about Options.

• importerKey: string Which can be found in the admin panel.

• user: json object Contains details of the importing user, so that they can be identified easily.

Code example with default button

Check codesandbox example.

Import plugin:

import UseCSVButton from "@usecsv/vuejs";

Vue.use(UseCSVButton); // Vue 2

createApp(App).use(UseCSVButton).mount("#app"); // Vue 3

use in your app

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

Code example with custom button

Check codesandbox example.

use scoped slots to render you CustomButton component. the component has to have an openModal prop which is passed down form usecsv-button

usage:

<template>
  <!-- Vue 2 -->
  <usecsv-button importerKey="your-importer-key" v-slot="slotProps">
    <button class="btn" @click="slotProps.openModal">Import Data</button>
  </usecsv-button>
  <!-- Vue 3 -->
  <usecsv-button importerKey="your-importer-key" v-slot="slotProps">
    <button class="btn" @click="slotProps.openModal()">Import Data</button>
  </usecsv-button>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
.btn {
  width: 170px;
  height: 70px;
  color: #fff;
  background-color: #027ad6;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.07);
  font: 700 24px sans-serif;
  text-align: center;
  border: none;
  border-radius: 3px;
}
</style>

Now your users can import data from within your app, the final step is to setup a webhook in your backend to receive imports. Let's goto the Webhook docs.