Embed Flatfile in your Vue.js application using our Vue SDK. This provides Vue components and composables for seamless integration.

​
Installation

npm install @flatfile/vue

​
Basic Implementation

​
1. Initialize Flatfile

Use the initializeFlatfile composable in your Vue component:

<script setup>
import { ref } from 'vue';
import { initializeFlatfile } from '@flatfile/vue';

const showSpace = ref(false);

const spaceProps = {
  publishableKey: 'pk_your_publishable_key',
  spaceId: 'us_sp_your_space_id'
};

const { Space, OpenEmbed } = initializeFlatfile(spaceProps);

const openImport = () => {
  showSpace.value = true;
  OpenEmbed();
};
</script>

<template>
  <div>
    <h1>Welcome to our app</h1>
    <button @click="openImport">Import Data</button>
    
    <div v-if="showSpace">
      <Space />
    </div>
  </div>
</template>

​
2. Get Your Credentials

  • publishableKey: Get from Platform Dashboard → Developer Settings
  • spaceId: Create a Space in the dashboard, copy the ID from the URL

​
Complete Example

<script setup>
import { ref } from 'vue';
import { initializeFlatfile } from '@flatfile/vue';

const showSpace = ref(false);

const spaceProps = {
  publishableKey: 'pk_your_publishable_key',
  spaceId: 'us_sp_your_space_id',
  closeSpace: {
    onClose: () => {
      showSpace.value = false;
    }
  }
};

const { Space, OpenEmbed } = initializeFlatfile(spaceProps);

const toggleImport = () => {
  showSpace.value = !showSpace.value;
  if (showSpace.value) {
    OpenEmbed();
  }
};
</script>

<template>
  <div>
    <h1>My Application</h1>
    <button @click="toggleImport">
      {{ showSpace ? 'Close' : 'Open' }} Import
    </button>
    
    <div v-if="showSpace" class="space-wrapper">
      <Space />
    </div>
  </div>
</template>

<style>
.space-wrapper {
  margin-top: 20px;
}
</style>

​
Configuration Options

​
Space Props

PropertyTypeRequiredDescription
publishableKeystringYesYour publishable key from the Platform Dashboard
spaceIdstringYesID of the Space to load
closeSpaceobjectNoConfiguration for closing behavior

​
Close Space Configuration

const spaceProps = {
  publishableKey: 'pk_your_publishable_key',
  spaceId: 'us_sp_your_space_id',
  closeSpace: {
    onClose: () => {
      // Handle close event
      showSpace.value = false;
    }
  }
};

​
Options API Syntax

If you prefer the Options API:

<script>
import { initializeFlatfile } from '@flatfile/vue';

export default {
  data() {
    return {
      showSpace: false
    };
  },
  setup() {
    const spaceProps = {
      publishableKey: 'pk_your_publishable_key',
      spaceId: 'us_sp_your_space_id'
    };

    const { Space, OpenEmbed } = initializeFlatfile(spaceProps);
    
    return {
      Space,
      OpenEmbed
    };
  },
  methods: {
    openImport() {
      this.showSpace = true;
      this.OpenEmbed();
    }
  }
};
</script>

<template>
  <div>
    <button @click="openImport">Import Data</button>
    <div v-if="showSpace">
      <Space />
    </div>
  </div>
</template>

​
Alternative: Create New Spaces

To create a new Space each time instead of reusing an existing one:

  1. Remove the spaceId property
  2. Add a workbook configuration object
<script setup>
import { initializeFlatfile } from '@flatfile/vue';

const spaceProps = {
  publishableKey: 'pk_your_publishable_key',
  workbook: {
    name: "Contacts Import",
    sheets: [{
      name: "Contacts",
      slug: "contacts",
      fields: [
        { key: "name", type: "string", label: "Name" },
        { key: "email", type: "string", label: "Email" }
      ]
    }]
  }
};

const { Space, OpenEmbed } = initializeFlatfile(spaceProps);
</script>

For detailed workbook configuration, see the Workbook API Reference.

​
TypeScript Support

The Vue SDK supports TypeScript:

<script setup lang="ts">
import { ref, Ref } from 'vue';
import { initializeFlatfile } from '@flatfile/vue';

interface SpaceConfig {
  publishableKey: string;
  spaceId: string;
}

const showSpace: Ref<boolean> = ref(false);

const spaceProps: SpaceConfig = {
  publishableKey: 'pk_your_publishable_key',
  spaceId: 'us_sp_your_space_id'
};

const { Space, OpenEmbed } = initializeFlatfile(spaceProps);
</script>

​
Styling

Add custom styles to integrate with your Vue application:

<style scoped>
.import-button {
  background-color: #4c48ef;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
}

.import-button:hover {
  background-color: #3f3ccc;
}

.space-container {
  margin-top: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
</style>

​
Next Steps

  • Styling: Customize the embedded experience in your Platform Dashboard Space settings
  • Data Processing: Set up Listeners in your Space for custom data transformations
  • API Integration: Use Flatfile API to retrieve processed data
  • Advanced Configuration: See @flatfile/vue documentation

​
Example Projects

Vue Example

Complete Vue.js application with Flatfile embedding