@vue-dapp/modal

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

Get started

SPA
Nuxt
TS
Vue
pnpm add pinia @vue-dapp/core @vue-dapp/modal

pnpm add pinia @pinia/nuxt @vue-dapp/core @vue-dapp/nuxt @vue-dapp/modal

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()

<VueDappModal
    dark
    v-model="isModalOpen"
    autoConnect
    autoConnectBrowserWalletIfSolo
    @connectError="connectErrorHandler"
    @autoConnectError="autoConnectErrorHandler"
    hideConnectingModal="false"
/>

Props

NameTypeDefaultDescriptionVersion
modelValueboolean | undefinedundefinedWhether to open the modal
darkbooleanfalseDark mode
autoConnectbooleanfalseWhether to autoConnect when the page loaded
autoConnectBrowserWalletIfSolobooleanfalseAuto click BrowserWallet if it's the only connector
hideConnectingModalbooleanfalseWhether to hide the connecting modal
NameTypeDescriptionVersion
update:modelValue() => booleanFor v-model
connectError() => erroremit error from try-catch
autoConnectError() => erroremit error from try-catch

Slots

NameParametersDescriptions
no-wallet-foundCustomize no wallet found message

Example

<VueDappModal>
    <template #no-wallet-found>
        <div class="flex justify-center items-center">No wallets</div>
    </template>
</VueDappModal>

Two approaches to open/close the modal

v-model approach

const isModalOpen = ref(false)

Must add v-model

<VueDappModal
    v-model="isModalOpen"
    autoConnect
/>

pinia approach

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

const { open, close } = useVueDappModal()

Don't add v-model

<VueDappModal autoConnect />