> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.withpersona.com/2021-05-14/inlined-vue-flow/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.withpersona.com/_mcp/server.

# Inlined Vue

> Load the Persona Inquiry flow directly in a Vue page.

The Inlined Vue flow allows loading the Persona Inquiry flow directly within your page as a Vue component. It is intended for desktop flows that do not want a dropdown modal experience.

Verifying individuals with the Inlined Vue Flow can be easily achieved with a short code snippet. You'll only need your template ID which can be found in the [Integration Section](https://withpersona.com/dashboard/integration) of your Dashboard.

The latest version of the SDK is: [![Persona Vue SDK latest](https://img.shields.io/npm/v/persona-vue?label=persona-vue\&color=4700EB)](https://www.npmjs.com/package/persona-vue)

## Inlining the flow

Persona can be integrated with the following code snippet. Remember to replace `templateId` with your organization's template ID.

**`TypeScript`**

```typescript TypeScript
import PersonaVue from 'persona-vue';

<template>
  <PersonaVue
    :template-id="<your template ID starting with itmpl_>"
    :environment-id="<your environment ID starting with env_>"
    :on-load="onLoadCallback"
    :on-complete="onCompleteCallback"
  />
</template>
```

To permit the Persona iframe to render on your domain, see [Security > Embedding the Persona iframe](/embedded-flow-security#embedding-the-persona-iframe).

## Styling

The inlined Vue component renders an `iframe` containing the Persona flow. For more granular or dynamic styling, the `iframe` can be targeted via CSS. We recommend targeting a selector provided by your app such as `.your-classname > iframe` instead of relying on Persona class names to avoid unexpected breakage.

**We recommend using a minimum height of `650px` and a minimum width of `400px` to ensure contents are properly displayed without excessive horizontal wrapping or scrolling.**

## Handling loading state

The Persona iframe starts loading when the Persona component is rendered. Thus, there will be a delay between when the component is rendered and when the Inquiry flow content is displayed. We recommend using the `onReady` [client callback](/embedded-flow-client-callbacks) to detect when loading is completed, and handling any loading UI outside of Persona.

Alternatively, if your use case allows it, you can pre-render the Persona component and visually hide it with CSS until it needs to be used.

> Load the Persona Inquiry flow directly in a Vue page.