modules
@dopt/vue / Exports
@dopt/vue
Table of contents
Interfaces
Variables
Functions
- useUpdateUser
- useFlow
- useBlock
- useTourItem
- useTour
- 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.
Remarks
This is useful if you did'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
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:105
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
A TourItem instance corresponding to the id.
Defined in
packages/@dopt/vue/src/tour.ts:146
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
A Tour instance corresponding to the id.
Defined in
packages/@dopt/vue/src/tour.ts:199
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
A Checklist instance corresponding to the id.
Defined in
packages/@dopt/vue/src/checklist.ts:191
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
A ChecklistItem instance corresponding to the id.
Defined in
packages/@dopt/vue/src/checklist.ts:153
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
A Modal instance corresponding to the id.
Defined in
packages/@dopt/vue/src/modal.ts:64
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
A Card instance corresponding to the id.
Defined in
packages/@dopt/vue/src/card.ts:64
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> |