This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Lint with ESLint
npm run lint
- In your App.vue file set up the following configuration.
<script setup>
import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi'
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, // required
projectId, // required
metadata, // required
enableWalletConnect: true, // Optional - true by default
enableInjected: true, // Optional - true by default
enableEIP6963: true, // Optional - true by default
enableCoinbase: true // Optional - true by default
})
reconnect(config)
// 3. Create modal
createWeb3Modal({
wagmiConfig: config,
projectId,
enableAnalytics: true // Optional - defaults to your Cloud configuration
})
</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>
- Smart contract interaction
<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>