@vue-dapp/modal

Use it first, then remove it later as you wish to customize your modal.

Get started

::code-group

``bash [SPA]
pnpm add pinia @vue-dapp/core @vue-dapp/modal
`

`bash [Nuxt]
pnpm add pinia @pinia/nuxt @vue-dapp/core @vue-dapp/nuxt @vue-dapp/modal
`

`ts [TS]
import { BrowserWalletConnector } from '@vue-dapp/core'
import { VueDappModal, useVueDappModal } from '@vue-dapp/modal'
import '@vue-dapp/modal/dist/style.css' // must add

const { open } = useVueDappModal()
`

`vue [Vue]
dark
v-model="isModalOpen"
autoConnect
autoConnectBrowserWalletIfSolo
@connectError="connectErrorHandler"
@autoConnectError="autoConnectErrorHandler"
hideConnectingModal="false"
/>
`

::

Props


| Name | Type | Default | Description | Version |
| ------------------------------ | -------------------- | --------- | --------------------------------------------------- | ------- |
| modelValue | boolean \| undefined | undefined | Whether to open the modal | |
| dark | boolean | false | Dark mode | |
| autoConnect | boolean | false | Whether to autoConnect when the page loaded | |
| autoConnectBrowserWalletIfSolo | boolean | false | Auto click BrowserWallet if it's the only connector | |
| hideConnectingModal | boolean | false | Whether to hide the connecting modal | |

| Name | Type | Description | Version |
| ----------------- | ------------- | ------------------------- | ------- |
| update:modelValue | () => boolean | For v-model | |
| connectError | () => error | emit error from try-catch | |
| autoConnectError | () => error | emit error from try-catch | |




Slots

| Name | Parameters | Descriptions |
| --------------- | ---------- | --------------------------------- |
| no-wallet-found | | Customize no wallet found message |

$3


`vue



`

Two approaches to open/close the modal

$3

`ts
const isModalOpen = ref(false)
`

Must add v-model
`vue
v-model="isModalOpen"
autoConnect
/>
`

$3

`ts
import { useVueDappModal } from '@vue-dapp/modal'

const { open, close } = useVueDappModal()
`

Don't add v-model
`vue

``