---
url: "https://vueda.dev/v3/reference/api/vue/ViewSetupDevice.md"
title: "ViewSetupDevice"
---

# ViewSetupDevice

## Overview

Multi-step form that guides the user through enrolling a two-factor authentication device.
Presents a method-selection step (TOTP app, email, or SMS), then a verification step where
the user confirms the device with a one-time code, then a confirmation step.

Theme entry: [ViewSetupDevice](/v3/reference/theming/keys/ViewSetupDevice.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-iconOverride">iconOverride</span> | `Object` |  | `null` | A partial icon registry (`{ [componentName]: { [iconName]: { component, props } } }`) merged with inherited and default icon entries; scopes icon overrides to this component and its descendants. |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-app">app</span> | `string` | yes |  | Django app label for the model that represents the 2FA device. |
| <span id="prop-model">model</span> | `string` | yes |  | Model name for the 2FA device (used to fetch available method choices). |
| <span id="prop-action">action</span> | `string` |  | `"setup"` | Action name sent to the server when initiating device setup. |

## Slots

### `action-form-inner` {#slot-action-form-inner}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-action-form-inner-param-options">options</span> |  |
| <span id="slot-action-form-inner-param-totpDataUri">totpDataUri</span> |  |
| <span id="slot-action-form-inner-param-totpSecret">totpSecret</span> |  |
| <span id="slot-action-form-inner-param-method">method</span> |  |
| <span id="slot-action-form-inner-param-step">step</span> |  |

### `totp-app-setup-step` {#slot-totp-app-setup-step}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-totp-app-setup-step-param-totpDataUri">totpDataUri</span> |  |
| <span id="slot-totp-app-setup-step-param-totpSecret">totpSecret</span> |  |

### `confirm-button` {#slot-confirm-button}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-confirm-button-param-loading">loading</span> |  |

### `cancel-button` {#slot-cancel-button}

Scoped slot.

#### Bindings

| Name | Description |
| --- | --- |
| <span id="slot-cancel-button-param-loading">loading</span> |  |
| <span id="slot-cancel-button-param-handleCancelClick">handleCancelClick</span> |  |

## Source

`client/lib/views/ViewSetupDevice.vue`