Skip to main content

Vue

Introduction

AppKit has support for Wagmi, Ethers and @solana/web3.js on Solana. Choose one of these ethereum libraries or solana to get started.

Installation

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem

Don't have a project ID?

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

Get startedcloud illustration

Cloud Configuration

Create a new project on Reown Cloud at https://cloud.reown.com and obtain a new project ID.

Implementation

For a quick integration, you can use the createAppKit function with a unified configuration. This automatically applies the predefined configurations for different adapters like Wagmi, Ethers, or Solana, so you no longer need to manually configure each one individually. Simply pass the common parameters such as projectId, chains, metadata, etc., and the function will handle the adapter-specific configurations under the hood.

This includes WalletConnect, Coinbase and Injected connectors, and the Blockchain API as a transport

info

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 { createAppKit, useAppKit } from '@reown/appkit/vue'

import { WagmiProvider } from 'wagmi'
import { arbitrum, mainnet } from '@reown/appkit/networks'
import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'

// 1. Get projectId from https://cloud.reown.com
const projectId = 'YOUR_PROJECT_ID'

// 2. Create a metadata object - optional
const metadata = {
name: 'AppKit',
description: 'AppKit Example',
url: 'https://example.com', // origin must match your domain & subdomain
icons: ['https://avatars.githubusercontent.com/u/179229932']
}

export const networks = [mainnet, arbitrum]

// 3. Create Wagmi Adapter
const wagmiAdapter = new WagmiAdapter({
ssr: true,
projectId,
networks
})

// 4. Create modal
createAppKit({
adapters: [wagmiAdapter],
networks: [mainnet, arbitrum],
metadata,
projectId,
features: {
analytics: true // Optional - defaults to your Cloud configuration
}
})

// 5. Use modal composable
const modal = useAppKit()
</script>

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

Importing networks

Reown AppKit use Viem networks under the hood, which provide a wide variety of networks for EVM chains. You can find all the networks supported by Viem within the @reown/appkit/networks path.

import { createAppKit } from '@reown/appkit'
import { mainnet, arbitrum, base, scroll, polygon } from '@reown/appkit/networks'
info

Looking to add a custom network? Check out the custom networks section.

Trigger the modal

To open AppKit you can use our web component or build your own button with AppKit 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 AppKit web components here

Smart Contract Interaction

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.