@vue-dapp/modal

@vue-dapp/modal

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

Get started

::code-group

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

Slots

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 />