Getting started with Portal in Vue.js

We've made it simple to get started with Portal with our Portal Vue Component. Here's what you'll need to know to begin.

note

You'll need a license key to continue. Log in to your account to access the Flatfile dashboard. Head to the Flows section in the left-hand navigation pane and find your license key under the Portal tab.

Install and import

npm install @flatfile/vuejs

This gives you access to the FlatfileButton component, which has the same basic functionality as our Adapter.

import { FlatfileButton } from "@flatfile/vuejs";

Now just import the FlatfileButton and include it in your Vue components, and you're ready to get started.

Configure your settings and usage

To launch, the FlatfileButton component, it must have the required props: settings , customer and licenseKey passed in.

Basic Usage

<template>
  <div id="app">
    <flatfile-button
      :licenseKey="licenseKey"
      :customer="customer"
      :settings="settings"
      :onData="onData">
      Import Contacts
    </flatfile-button>
  </div>
</template>

<script>
  import { FlatfileButton } from '@flatfile/vuejs';

  export default {
    name: 'App',
    components: {
      FlatfileButton,
    },
    data: () => ({
      licenseKey: 'License Key Here',
      customer: {
        userId: '12345',
      },
      settings: {
        type: 'test import',
        fields: [
          { label: 'name', key: 'Name' }
          { label: 'email', key: 'Email' }
        ]
      },
    }),
    methods: {
      // *optional* shown here for demonstration purposes
      onData: function (results) {
        // Do something with the data here
        console.log(results);
        return "Done!";
      }
    },
  }
</script>

Here is a list of all the properties that are configurable with the <FlatfileButton> component. Visit out settings guide to learn about each in greater depth.

• settings - Required - Pass in an object containing the import type and your fields . For a list of the other optional settings, check out our options documentation here.
• customer - Required - Pass in an object that identifies the customer uploading the file. This refers the the setCustomer() function on our SDK, and the same object should be passed in here.
• licenseKey - Required - In order to access our product, a license key is required. The license key can be found in your dashboard by logging in here.
• onCancel - This allows you to pass in a callback function that will run if the user cancels out of the import.
• onData - This allows you to return a new Promise to handle the Flatfile results when returned.
• onRecordChange - This provides access to Flatfile's record hooks when a record changes.
• onRecordInit - This provides access to Flatfile's record hooks when a record initializes.
• fieldHooks - This allows you to pass in one or more field hooks as separate callback functions.

Full Usage

<template>
  <div id="app">
    <flatfile-button
      :licenseKey="licenseKey"
      :customer="customer"
      :settings="settings"
      :fieldHooks="fieldHooks"
      :onData="onData"
      :onRecordInit="onRecordInit"
      :onRecordChange="onRecordChange"
      :onCancel="onCancel"
      class="ff-button">
      Import Contacts
    </flatfile-button>
  </div>
</template>

<script>
  import { FlatfileButton } from "@flatfile/vuejs";

  export default {
    name: "App",
    components: {
      FlatfileButton,
    },
    data: () => ({
      licenseKey: "License Key Here",
      customer: {
        userId: "12345",
      },
      settings: {
        type: "test import",
        fields: [
          { label: "Name", key: "name" },
          { label: "Email", key: "email" },
        ],
      },
      fieldHooks: {
        email: (values) => {
          console.log({ values });
          return values.map(([item, index]) => [
            {
              value: item + "@",
              info: [{ message: "added @ after the email", level: "warning" }],
            },
            index,
          ]);
        },
      },
    }),
    methods: {
      onData: function (results) {
        let errorState = false;
        console.log("onData results");
        console.log(results.$data);
      },
      onRecordInit: function (
        record,
        /*index*/
      ) {
        console.log("onRecordInit");
        return {
          email: {
            value: record.email + "@",
            info: [{ message: "added @ on init", level: "info" }],
          },
        };
      },
      onRecordChange: function (
        record,
        /*index*/
      ) {
        console.log("onRecordChange");
        return {
          email: {
            value: record.email + "#",
            info: [{ message: "added # on change", level: "warning" }],
          },
        };
      },
      onCancel: function () {
        console.log("canceled!");
      },
    },
  };
</script>

<style>
  .ff-button button {
    /* style your button */
  }
</style>

tip

Try our example in CodeSandbox.