Skip to main content

Vue

Introduction

Web3Modal SDK has support for Wagmi, Ethers v5 and Ethers v6. Choose one of these ethereum libraries to get started.

Installation

npm install @web3modal/wagmi @wagmi/core viem

Don't have a project ID?

Head over to WalletConnect Cloud and create a new project now!

Get startedcloud illustration

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.

In your App.vue file set up the following configuration.

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

// 1. Get projectId at https://cloud.walletconnect.com
const projectId = 'YOUR_PROJECT_ID'

// 2. Create wagmiConfig
const metadata = {
name: 'Web3Modal',
description: 'Web3Modal Example',
url: 'https://web3modal.com',
icons: ['https://avatars.githubusercontent.com/u/37784886']
}

const chains = [mainnet, arbitrum]
const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })

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

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

Learn more about the Web3Modal web components here

note

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

Smart Contract Interaction

<script setup lang="ts">
import { readContract } from '@wagmi/core'
import { USDTAbi } from '../abi/USDTAbi'

const USDTAddress = '0x...'

const data = readContract({
address: USDTAddress,
abi: USDTAbi,
functionName: 'symbol',
})
</script>

Read more about Wagmi actions for smart contract interaction here.