Vue Nuxt
How to set up Flows in your Nuxt application.
Flows makes it easy to add product adoption experiences into your Vue app built with Nuxt. Integrating Flows into your app enables you to create interactive workflows, user onboarding, guided tours, in-app messaging, and more.
This guide walks you through integrating Flows into your Vue app using the JavaScript SDK and components package to get you started.
Check out our template projects for examples of how to implement Flows in your application.
Install the JavaScript SDK and components package
You can install the Flows JavaScript SDK from npm:
npm i @flows/js @flows/js-componentsInitialize the SDK
Use the init function to initialize the SDK with your organization ID and environment key, which you can find in the Settings > General and Settings > Environments sections of the Flows dashboard.
Create a Flows Nuxt plugin to handle the initialization logic. Add <flows-floating-blocks> custom element to your root component to render floating blocks. Finally, tell Vue about Flows custom elements to avoid rendering them as Vue components in nuxt.config.ts.
import { defineNuxtPlugin } from "nuxt/app";
import { init } from "@flows/js";
import { setupJsComponents } from "@flows/js-components";
import * as components from "@flows/js-components/components";
import * as tourComponents from "@flows/js-components/tour-components";
import "@flows/js-components/index.css";
export default defineNuxtPlugin({
name: "flows",
parallel: true,
hooks: {
"app:mounted"() {
init({
organizationId: "YOUR_ORGANIZATION_ID", // Find this in Settings > General
userId: "YOUR_USER_ID", // Identify the user
environment: "production", // Default environment
});
setupJsComponents({
components: { ...components },
tourComponents: { ...tourComponents },
});
},
},
});For a full list of supported properties, see the init function documentation. For an example of how to create a custom component, see the Vue Nuxt template project.
Create your first workflow
That's it! You're now ready to create your first workflow. See our quickstart guide for more information.
Last updated on