Vue

caution

This documentation is for Web3Modal v3 which is currently in Beta. You can find Web3Modal v2 documentation here

With Web3Modal Vue, we work with the Wagmi library which contains everything you need to start working with Ethereum. You can sign messages, interact with smart contracts, and much more.

Don't have a project ID?

Head over to WalletConnect Cloud and create a New Project now!

Get started

Installation

npm

npm install @web3modal/wagmi@beta @wagmi/core viem

Yarn

yarn add @web3modal/wagmi@beta @wagmi/core viem

Bun

bun install @web3modal/wagmi@beta @wagmi/core viem

pnpm

pnpm add @web3modal/wagmi@beta @wagmi/core viem

Implementation

You can start Web3Modal configuration using either default or custom mode.

Default mode will implement WalletConnect, Browser Wallets (injected) and Coinbase options in addition to Wagmi's public provider and WalletConnect's provider.

Default

Start by importing createWeb3Modal, defaultWagmiConfig and wagmi packages, then create wagmiConfig using defaultWagmiConfig function as shown below. Finally, pass wagmiConfig to createWeb3Modal.

<script setup>
  import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/vue'
  import { mainnet, arbitrum } from '@wagmi/core/chains'

  // 1. Get projectId
  const projectId = 'YOUR_PROJECT_ID'

  // 2. Create wagmiConfig
  const chains = [mainnet, arbitrum]
  const wagmiConfig = defaultWagmiConfig({ chains, projectId, appName: 'Web3Modal' })

  // 3. Create modal
  createWeb3Modal({ wagmiConfig, projectId, chains })
</script>

<template>
  // Rest of your app ... 
</template>

Custom

Start by importing createWeb3Modal, walletConnectProvider and wagmi packages, then create wagmi config using your own settings. Finally, pass wagmi config to createWeb3Modal.

<script setup lang="ts">
  import { walletConnectProvider } from '@web3modal/wagmi'
  import { createWeb3Modal } from '@web3modal/wagmi/vue'

  import { configureChains, createConfig } from '@wagmi/core'
  import { mainnet } from '@wagmi/core/chains'
  import { CoinbaseWalletConnector } from '@wagmi/core/connectors/coinbaseWallet'
  import { InjectedConnector } from '@wagmi/core/connectors/injected'
  import { WalletConnectConnector } from '@wagmi/core/connectors/walletConnect'

  // 1. Get projectId
  const projectId = 'YOUR_PROJECT_ID'

  // 2. Create wagmiConfig
  const { chains, publicClient } = configureChains(
    [mainnet],
    [walletConnectProvider({ projectId })]
  )

  const wagmiConfig = createConfig({
    autoConnect: true,
    connectors: [
      new WalletConnectConnector({ options: { projectId, showQrModal: false } }),
      new InjectedConnector({ options: { shimDisconnect: true } }),
      new CoinbaseWalletConnector({ options: { appName: 'Web3Modal' } })
    ],
    publicClient
  })

  // 3. Create modal
  createWeb3Modal({ wagmiConfig, projectId, chains })
</script>

<template>
  // Rest of your app ...
</template>

Trigger the modal

To open Web3Modal you can use our default web components or build your own logic with Web3Modal composables.

Components

You can use default web components to open the modal

<template>
  <w3m-button />
</template>

Learn more about the Web3Modal web components here

note

Web components are global html elements that don't require importing.

Composables

You can trigger the modal by calling the open method from useWeb3Modal composable.

<script setup lang="ts">
  import { useWeb3Modal } from '@web3modal/wagmi/vue'
  // 4. Use modal composable
  const modal = useWeb3Modal()
</script>

<template>
  <button @click="modal.open()">Open Connect Modal</button>
  <button @click="modal.open({ view: 'Networks' })">Open Network Modal</button>
</template>

Learn more about the Web3Modal composables here

Use wagmi Actions

wagmi provides everything you'll need to start working with accounts, contracts, chains and much more.

import { getAccount, writeContract, disconnect, watchAccount } from '@wagmi/core'