modules

@dopt/vue / Exports

@dopt/vue

Table of contents

Interfaces

• DoptPluginOptions
• Flow
• Block
• TourItem
• Tour
• HintsItem
• Hints
• Checklist
• ChecklistItem
• Modal
• Card

Variables

• DoptPlugin

Functions

• useUpdateUser
• useFlow
• useBlock
• useTourItem
• useTour
• useHintsItem
• useHints
• useChecklist
• useChecklistItem
• useModal
• useCard
• useDoptInitialized
• useFlowStatus

Variables

DoptPlugin

• Const DoptPlugin: Plugin<DoptPluginOptions[]>

Install this plugin via app.use in order to configure Dopt for your vue app.

Remarks

This plugin accepts options of type DoptPluginOptions.

Example

import { DoptPlugin } from '@dopt/vue';
import App from './App.vue';

const app = createApp(App);

app.use(DoptPlugin, {
  apiKey: 'MY-API-KEY',
  userId,
  flowVersions: {
    'new-user-onboarding': 3,
    'plan-upsell': 4,
  },
});

Defined in

packages/@dopt/vue/src/plugin.ts:80

Functions

useUpdateUser

▸ useUpdateUser(): (userId: undefined | string, groupId?: string) => void

A Vue composable to access a setter to update the page's current user (and group).

Remarks

This is useful if you didn't specify a user when initializing DoptPlugin. You might not have been able to specify a user at plugin time because a user was not available (for example, a user was being fetched asynchronously).

Returns

fn

A function which can be called with a userId and optionally a groupId. When the function is called, the DoptPlugin's userId will be reconfigured and the plugin will reload.

▸ (userId, groupId?): void

Parameters

Name	Type
userId	undefined | string
groupId?	string

Returns

void

Defined in

packages/@dopt/vue/src/user.ts:17

---

useFlow

▸ useFlow(sid): Flow

A Vue composable for accessing a flow's state and methods corresponding to an intent-based API for manipulating flow state.

Parameters

Name	Type	Description
sid	string	['sid']

Returns

Flow

a Flow the state of the flow and methods to manipulate flow state

Defined in

packages/@dopt/vue/src/flow.ts:84

---

useBlock

▸ useBlock<T>(id): Block<T>

A Vue composable for accessing a block's state and methods corresponding to an intent-based API for manipulating said block state.

Type parameters

Name	Type
T	unknown

Parameters

Name	Type	Description
id	string	one of ['sid'] | ['uid'] this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

Block<T>

a Block the state of the block and methods to manipulate block state

Defined in

packages/@dopt/vue/src/block.ts:131

---

useTourItem

▸ useTourItem(id): TourItem

Returns the TourItem associated with this id.

Example

const tourItem = useTourItem("flow-three.my-tour-item");

Parameters

Name	Type	Description
id	string	one of ['uid'] | ['sid'] The id of the checklist item. this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

TourItem

A TourItem instance corresponding to the id.

Defined in

packages/@dopt/vue/src/tour.ts:166

---

useTour

▸ useTour(id): Tour

Returns the Tour associated with this id.

Example

const tour = useTour("flow-three.my-tour");

Parameters

Name	Type	Description
id	string	one of ['uid'] | ['sid'] The id of the modal. this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

Tour

A Tour instance corresponding to the id.

Defined in

packages/@dopt/vue/src/tour.ts:241

---

useHintsItem

▸ useHintsItem(id): HintsItem

Returns the HintsItem associated with this id.

Example

const hintsItem = useHintsItem("flow-three.my-hints-item");

Parameters

Name	Type	Description
id	string	one of ['uid'] | ['sid'] The id of the checklist item. this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

HintsItem

A HintsItem instance corresponding to the id.

Defined in

packages/@dopt/vue/src/hints.ts:175

---

useHints

▸ useHints(id): Hints

Returns the Hints associated with this id.

Example

const hints = useHints("flow-three.my-hints");

Parameters

Name	Type	Description
id	string	one of ['uid'] | ['sid'] The id of the modal. this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

Hints

A Hints instance corresponding to the id.

Defined in

packages/@dopt/vue/src/hints.ts:250

---

useChecklist

▸ useChecklist(id): Checklist

Returns the Checklist associated with this id.

Example

const checklist = useChecklist("flow-two.my-checklist");

Parameters

Name	Type	Description
id	string	one of ['uid'] | ['sid'] The id of the modal. this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

Checklist

A Checklist instance corresponding to the id.

Defined in

packages/@dopt/vue/src/checklist.ts:217

---

useChecklistItem

▸ useChecklistItem(id): ChecklistItem

Returns the ChecklistItem associated with this id.

Example

const checklistItem = useChecklistItem("flow-two.my-checklist-item");

Parameters

Name	Type	Description
id	string	one of ['uid'] | ['sid'] The id of the checklist item. this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

ChecklistItem

A ChecklistItem instance corresponding to the id.

Defined in

packages/@dopt/vue/src/checklist.ts:177

---

useModal

▸ useModal(id): Modal

Returns the Modal associated with this id.

Example

const modal = useModal("flow-one.my-modal");

Parameters

Name	Type	Description
id	string	one of ['uid'] | ['sid'] The id of the modal. this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

Modal

A Modal instance corresponding to the id.

Defined in

packages/@dopt/vue/src/modal.ts:70

---

useCard

▸ useCard(id): Card

Returns the Card associated with this id.

Example

const card = useCard("flow-one.my-card");

Parameters

Name	Type	Description
id	string	one of ['uid'] | ['sid'] The id of the card. this param accepts either the user defined identifier (sid) or the system created identifier (the uid)

Returns

Card

A Card instance corresponding to the id.

Defined in

packages/@dopt/vue/src/card.ts:70

---

useDoptInitialized

▸ useDoptInitialized(): Ref<boolean>

A Vue composable for accessing whether the Dopt Plugin has been initialized.

Dopt-level initialization is defined as:

• all flows have been fetched
• Dopt's socket connection is ready
• all flows which need to be started have been started

Remarks

Note, this composable does not check whether any initialization steps had errors. Use useFlowStatus to check flow status, including failures, at a more granular level.

Returns

Ref<boolean>

A Ref<boolean>, true when Dopt is initialized, false otherwise.

Defined in

packages/@dopt/vue/src/inititialized.ts:20

---

useFlowStatus

▸ useFlowStatus(sid): Object

A Vue composable for accessing a Flow's initialization status.

Initialization is defined as:

• the flow has been fetched
• Dopt's socket connection is ready
• the flow has been started, if necessary

Remarks

Once initialized, the status will be updated to pending: false. If any parts of initialization fail, the status will additionally have failed: true. If the sid doesn't match any flows, the function will always return pending: true, failed: false.

Parameters

Name	Type	Description
sid	string	['sid']

Returns

Object

{ pending: Ref<boolean>, failed: Ref<boolean> }

Name	Type
pending	Ref<boolean>
failed	Ref<boolean>

Defined in

packages/@dopt/vue/src/inititialized.ts:53