Web3Modal with Vue and web3js
Live code editor
Installation
For this guide we will be creating a new project will need to install dependancies. We will be using vite to locally host the app, React and web3modal-web3js
npm install web3modal-web3js react react-dom
npm install --save-dev vite @vitejs/plugin-react
Implementation
Within the root of the project create index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React Web3 example</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Now we will add the Web3modal code within src/Web3modal.tsx
import { createWeb3Modal, defaultConfig } from 'web3modal-web3/react'
// 1. Get projectId, Your Project ID can be obtained from 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 a metadata object
const metadata = {
name: 'My Website',
description: 'My Website description',
url: 'https://mywebsite.com', // origin must match your domain & subdomain
icons: ['https://avatars.mywebsite.com/']
}
// 4. Create web3 config
const web3Config = 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
createWeb3Modal({
ethersConfig,
chains: [mainnet],
projectId,
enableAnalytics: true // Optional - defaults to your Cloud configuration
})
export default function App() {
return <YourApp />
}
Set up vite configs within root vite.config.js
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [react()]
})
And finally add react to the app src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.js'
ReactDOM.createRoot(document.getElementById('app')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
You are finished and have successfully created Web3modal with Vue!