Vue
Introduction
AppKit has support for Wagmi and Ethers, which will help you interact with wallets and smart contracts. Choose one of these Ethereum libraries to get started.
Installation
- Wagmi
- Ethers
- Ethers v5
- npm
- Yarn
- Bun
- pnpm
npm install @web3modal/wagmi @wagmi/core @wagmi/connectors viem
yarn add @web3modal/wagmi @wagmi/core @wagmi/connectors viem
bun add @web3modal/wagmi @wagmi/core @wagmi/connectors viem
pnpm add @web3modal/wagmi @wagmi/core @wagmi/connectors viem
- npm
- Yarn
- Bun
- pnpm
npm install @web3modal/ethers5 ethers@5.7.2
yarn add @web3modal/ethers5 ethers@5.7.2
bun add @web3modal/ethers5 ethers@5.7.2
pnpm add @web3modal/ethers5 ethers@5.7.2
- npm
- Yarn
- Bun
- pnpm
npm install @web3modal/ethers ethers
yarn add @web3modal/ethers ethers
bun add @web3modal/ethers ethers
pnpm add @web3modal/ethers ethers
Don't have a project ID?
Head over to WalletConnect Cloud and create a new project now!
Cloud Configuration
Create a new project on WalletConnect Cloud at https://cloud.walletconnect.com and obtain a new project ID.
Implementation
- Wagmi
- Ethers
- Ethers v5
For a quick integration you can use defaultWagmiConfig
function which wraps Wagmi's createConfig
function with a predefined configuration.
This includes WalletConnect, Coinbase and Injected connectors, and the Blockchain API as a transport
If you're using Nuxt, you can set wagmi's ssr
option to true and call the reconnect
function after your application mounts.
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'
import { reconnect } from '@wagmi/core'
// 1. Define constants
const projectId = 'YOUR_PROJECT_ID'
// 2. Create wagmiConfig
const metadata = {
name: 'Web3Modal',
description: 'Web3Modal Example',
url: 'https://web3modal.com', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/37784886']
}
const chains = [mainnet, arbitrum]
const config = defaultWagmiConfig({
chains,
projectId,
metadata,
...wagmiOptions // Optional - Override createConfig parameters
})
reconnect(config)
// 3. Create modal
createWeb3Modal({
wagmiConfig: config,
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
enableOnramp: true // Optional - false as default
})
</script>
<template> // Rest of your app ... </template>
In your App.vue
file set up the following configuration.
<script setup lang="ts">
import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/vue'
// 1. Get projectId at https://cloud.walletconnect.com
const projectId = 'YOUR_PROJECT_ID'
// 2. Set chains
const mainnet = {
chainId: 1,
name: 'Ethereum',
currency: 'ETH',
explorerUrl: 'https://etherscan.io',
rpcUrl: 'https://cloudflare-eth.com'
}
// 3. Create your application's metadata object
const metadata = {
name: 'My Website',
description: 'My Website description',
url: 'https://mywebsite.com', // url must match your domain & subdomain
icons: ['https://avatars.mywebsite.com/']
}
// 4. Create Ethers config
const ethersConfig = defaultConfig({
/*Required*/
metadata,
/*Optional*/
enableEIP6963: true, // true by default
enableInjected: true, // true by default
enableCoinbase: true, // true by default
rpcUrl: '...', // used for the Coinbase SDK
defaultChainId: 1 // used for the Coinbase SDK
})
// 5. Create a Web3Modal instance
const modal = createWeb3Modal({
ethersConfig,
chains: [mainnet],
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
enableOnramp: true // Optional - false as default
})
</script>
<template> // Rest of your app ... </template>
Make sure that the url
from the metadata
matches your domain and subdomain. This will later be used by the Verify API to tell wallets if your application has been verified or not.
In your App.vue
file set up the following configuration.
<script setup lang="ts">
import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/vue'
// 1. Get projectId from https://cloud.walletconnect.com
const projectId = 'YOUR_PROJECT_ID'
// 2. Set chains
const mainnet = {
chainId: 1,
name: 'Ethereum',
currency: 'ETH',
explorerUrl: 'https://etherscan.io',
rpcUrl: 'https://cloudflare-eth.com'
}
// 3. Create your application's metadata object
const metadata = {
name: 'My Website',
description: 'My Website description',
url: 'https://mywebsite.com', // url must match your domain & subdomain
icons: ['https://avatars.mywebsite.com/']
}
// 4. Create Ethers config
const ethersConfig = defaultConfig({
/*Required*/
metadata,
/*Optional*/
enableEIP6963: true, // true by default
enableInjected: true, // true by default
enableCoinbase: true, // true by default
rpcUrl: '...' // used for the Coinbase SDK
defaultChainId: 1, // used for the Coinbase SDK
}),
// 5. Create a Web3Modal instance
const modal = createWeb3Modal({
ethersConfig,
chains: [mainnet],
projectId,
enableAnalytics: true, // Optional - defaults to your Cloud configuration
enableOnramp: true // Optional - false as default
})
</script>
<template> // Rest of your app ... </template>
Make sure that the url
from the metadata
matches your domain and subdomain. This will later be used by the Verify API to tell wallets if your application has been verified or not.
Trigger the modal
- Wagmi
- Ethers
- Ethers v5
To open Web3Modal you can use our web component or build your own button with Web3Modal composables.
In this example we are going to use the <w3m-button>
component.
Web components are global html elements that don't require importing.
<template>
<w3m-button />
</template>
Learn more about the Web3Modal web components here
To open Web3Modal you can use our web component or build your own button with the Web3Modal composables.
- Web Components
- Composables
<template>
<w3m-button />
</template>
Learn more about the Web3Modal web components here
Web components are global html elements that don't require importing.
You can trigger the modal by calling the open
method from useWeb3Modal
composable.
<script setup lang="ts">
import { useWeb3Modal } from '@web3modal/ethers/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
To open Web3Modal you can use our web component or build your own button with the Web3Modal composables.
- Web Components
- Composables
<template>
<w3m-button />
</template>
Learn more about the Web3Modal web components here
Web components are global html elements that don't require importing.
You can trigger the modal by calling the open
method from useWeb3Modal
composable.
<script setup lang="ts">
import { useWeb3Modal } from '@web3modal/ethers/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
Smart Contract Interaction
- Wagmi
- Ethers
Wagmi actions can help us interact with wallets and smart contracts:
<script setup lang="ts">
import { readContract } from '@wagmi/core'
import { USDTAbi } from '../abi/USDTAbi'
const USDTAddress = '0x...'
const data = readContract({
abi: USDTAbi,
address: USDTAddress,
functionName: 'symbol'
})
</script>
Read more about Wagmi actions for smart contract interaction here.
Ethers can help us interact with wallets and smart contracts:
<script setup lang="ts">
import { BrowserProvider, Contract, formatUnits } from 'ethers'
const USDTAddress = '0x617f3112bf5397D0467D315cC709EF968D9ba546'
// The ERC-20 Contract ABI, which is a common contract interface
// for tokens (this is the Human-Readable ABI format)
const USDTAbi = [
'function name() view returns (string)',
'function symbol() view returns (string)',
'function balanceOf(address) view returns (uint)',
'function transfer(address to, uint amount)',
'event Transfer(address indexed from, address indexed to, uint amount)'
]
const walletProvider = modal.getWalletProvider()
async function getBalance() {
if (!isConnected) throw Error('User disconnected')
const ethersProvider = new BrowserProvider(walletProvider)
const signer = await ethersProvider.getSigner()
// The Contract object
const USDTContract = new Contract(USDTAddress, USDTAbi, signer)
const USDTBalance = await USDTContract.balanceOf(address)
console.log(formatUnits(USDTBalance, 18))
}
</script>
Was this helpful?