nuvo uses AI to enable you to import messy files with ease.

Use the UI library in our nuvo-vuejs package to create the best data import experience for your customers!

Getting started

Make sure you have signed up for nuvo, and that you have access to your Licence Key.

Installation

Add nuvo to your app:

npm:

npm install nuvo-vuejs

yarn:

yarn add nuvo-vuejs

Implementation

Add the NuvoImporter component inside of the <script> tag of the file App.vue

<script>import {NuvoImporter} from 'nuvo-vuejs';</script>

Add nuvo component

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </div>
</template>

<script>
  import { NuvoImporter } from 'nuvo-vuejs';

  export default {
    name: 'App',
    components: {
      NuvoImporter,
    },
    data: () => {
      return {
        licenseKey: 'Your License Key',
        settings: {
          developerMode: true,
          identifier: 'product_data',
          columns: [
            {
              label: 'Product ID',
              key: 'product_id',
            },
            {
              label: 'Article Name',
              key: 'article_name',
            },
          ],
        },
      };
    },
    methods: {
      onResults: (result, errors, complete) => {
        console.log('Result:', result);
        console.log('Errors:', errors);
        complete();
      },
    },
  };
</script>

In the interactive demo below, try changing the code and see how it affects the output.

For more options, see our documentation and visit our Knowledge base to see more code examples.