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",
};
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
For authentication and security guidance, see Advanced Configuration.
Complete Example
The example below will open an empty space. To create the sheet your users
should land on, you’ll want to create a workbook as shown further down this
page.
<script setup>
import { ref } from "vue";
import { initializeFlatfile } from "@flatfile/vue";
const showSpace = ref(false);
const spaceProps = {
publishableKey: "pk_your_publishable_key",
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>
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>
Creating New Spaces
To create a new Space each time:
- Add a
workbook configuration object. Read more about workbooks here.
- Optionally deploy a
listener for custom data processing. Your listener will contain your validations and transformations
<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.
Reusing Existing Spaces
When reusing existing Spaces, the proper pattern is to let your server handle Space creation and management:
<script setup>
import { ref } from "vue";
import { initializeFlatfile } from "@flatfile/vue";
const showSpace = ref(false);
// Client-side initialization with existing Space
const spaceProps = {
space: {
spaceId: "us_sp_yourSpaceId",
token: "accessToken",
},
};
const { Space, OpenEmbed } = initializeFlatfile(spaceProps);
const openImport = () => {
showSpace.value = true;
OpenEmbed();
};
</script>
For server-side Space creation and management patterns, see Server Setup.
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;
}
const showSpace: Ref<boolean> = ref(false);
const spaceProps: SpaceConfig = {
publishableKey: "pk_your_publishable_key",
};
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>
Configuration Options
For complete configuration options including authentication, theming, and advanced settings, see Advanced Configuration.
Next Steps
- Authentication: Set up secure authentication with Advanced Configuration
- Server Setup: Configure backend data processing with Server Setup
- Styling: Customize the embedded experience in your Platform Dashboard Space settings
- API Integration: Use Flatfile API to retrieve processed data
Quick Links
Example Projects
