Quickstart

For synchronous data import/exchange completed in one session, create a new Space each time Flatfile is opened. This suits situations where a clean slate for every interaction is preferred.

​

Before you begin

​

Get your keys

To complete this tutorial, you'll need to retrieve your Publishable key from your development environment.

Make a new directory.

mkdir example-flatfile-vuejs-embed

Go into that directory.

cd example-flatfile-vuejs-embed

Follow prompts from the init command.

npm init

npm i vue @flatfile/vue @flatfile/plugin-record-hook @flatfile/listener && npm i --save-dev vite @vitejs/plugin-vue vue-tsc typescript

​

Create your file structure

Setup your app to look something like this:

├── src/
   ├── App.vue
   ├── config.ts
   ├── main.ts
   ├── shims-vue.d.ts (optional if you have errors when importing App.vue)
   ├── vite-env.d.ts
   ├── styles.css (optional)
   └── listener.ts (wait to add this)
├── index.html
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
├── .env (for your keys)
├── package.json <--- already created
└── package-lock.json <--- already created

In this file structure, your main directory is src.

Depending on how you want to handle styling your application, you can have a styles.css file in your src directory, create sub-directories to contain style files, or even create directories outside of src if you prefer. The only requirement is that the files can be imported into vue files.

The heart of your vue app will be App.vue, as this will configure and render your component(s) to the index.html.

​

Build your importer

​

1. Add a Flatfile Button

Add a button to your application to open Flatfile in a modal. Pass in your publishableKey and a new Space will be created on each page load. Optionally, add the content here to your styles.css.

​

2. Configure your project

In your environment file, you’ll need to define your keys. In this example, you will need your publishableKey. You can find these under “Developer settings” when logged into platform.flatfile.com.

You can create your .env file via the template below, as well as your App.vue, tsconfig.json, tsconfig.node.json, and vite.config.ts, which are the remaining top-level config files. After these are initialized properly we can configure the app files under src.

​

3. Initialize Flatfile

In your App.vue you’ll need to pass in a minimum of the publishableKey from your .env.

Also, add the content here to your main.ts, and vite-env.d.ts. Optionally you can also add shims-vue.d.ts if you have the need.

​

4. Start your client

1. Update your package.json to include this script:

  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },

2. Now, start your front end by heading to the terminal and running the following command.

  npm run dev

Your console should display a message like the following:

> vue@0.0.0 dev
> vite


  VITE v4.5.0  ready in 215 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

3. To view your app, copy the url and paste it into your browser. Click the button and see that an Empty Space gets created.

​

5. Build a workbook

Now, let’s build a Workbook inside the Space for next time.

Add your config.ts file, and place the following code in it. After you have done so, import the configuration to App.vue, and update spaceProps to have the value of config under workbook (this will be around line 36). This config file has the configuration settings for your workbook, so feel free to edit however necessary to meet your needs.

​

6. Transform Data

Next, we’ll listen for data changes and respond using an event listener.

1. Add a src/listener.ts file with this simple recordHook.
2. Update App.tsx to import the listener.

Once you add this code, when a change occurs, we’ll log the entered first name and update the last name to “Rock.” You’ll immediately see this begin to work when you add or update any records. Learn more about Handling Data

​

7. Match your brand

By attaching a themeConfig to spaceProps in src/App.tsx, we will now override colors in your Space to match your brand. See all of the options here in the Theming Reference.

themeConfig: {
  root: {
    primaryColor: "red",
    textColor: "white",
    logo: "https://images.ctfassets.net/hjneo4qi4goj/gL6Blz3kTPdZXWknuIDVx/7bb7c73d93b111ed542d2ed426b42fd5/flatfile.svg",
  },
},

​

8. Add customizations

You can stop here or you can view our full reference to see all the ways you can customize your importer.

​

Example Project

Find this Vue.js example project in the Flatfile GitHub repository.