WalletConnect App SDK is chain agnostic and provides seamless integration with several blockchain ecosystems. WalletConnect App SDK when combined with Universal Provider library enables compatibility across any blockchain protocol.

​
Pre-requisites

This section is to inform you about the pre-requisites for integrating WalletConnect as an App with Vue

​
Cloud Configuration

Create a new project on WalletConnect Dashboard at https://dashboard.reown.com and obtain a new project ID. You will need this project ID to initialize WalletConnect in your project (app).
Don’t have a project ID?Head over to WalletConnect Dashboard and create a new project now!

Get started

​
Installation

npm install @reown/appkit @reown/appkit-universal-connector @reown/appkit-common ethers

​
Implementation

Here is a sample implementation of WalletConnect App SDK with Vue. You can also check the example repository below.

AppKit Core Example

Check the Vue AppKit Core example
 For a quick integration of Appkit Core you can use the UniversalConnector class. Which simplifies the integration of Appkit Core by providing a single interface for all the blockchain protocols. You can configure the Universal Connector with the networks you want to support. For more information, please visit RPC Reference section from our docs. We recommend creating a config file to establish a singleton instance for the Universal Connector: 

import type { AppKitNetwork } from '@reown/appkit/networks'
import type { CustomCaipNetwork } from '@reown/appkit-common'
import { UniversalConnector } from '@reown/appkit-universal-connector'

// Get projectId from https://dashboard.reown.com
export const projectId = import.meta.env.VITE_PROJECT_ID

if (!projectId) {
  throw new Error('Project ID is not defined')
}

const suiMainnet: CustomCaipNetwork<'sui'> = {
  id: 784,
  chainNamespace: 'sui' as const,
  caipNetworkId: 'sui:mainnet',
  name: 'Sui',
  nativeCurrency: { name: 'SUI', symbol: 'SUI', decimals: 9 },
  rpcUrls: { default: { http: ['https://fullnode.mainnet.sui.io:443'] } }
}

const stacksMainnet: CustomCaipNetwork<'stacks'> = {
  id: 1,
  chainNamespace: 'stacks' as const,
  caipNetworkId: 'stacks:1',
  name: 'Stacks',
  nativeCurrency: { name: 'STX', symbol: 'STX', decimals: 6 },
  rpcUrls: { default: { http: ['https://stacks-node-mainnet.stacks.co'] } }
}

// for custom networks visit -> https://docs.reown.com/appkit/react/core/custom-networks
export const networks = [suiMainnet, stacksMainnet] as [AppKitNetwork, ...AppKitNetwork[]]

export async function getUniversalConnector() {
  const universalConnector = await UniversalConnector.init({
    projectId,
    metadata: {
      name: 'Universal Connector',
      description: 'Universal Connector',
      url: 'https://appkit.reown.com',
      icons: ['https://appkit.reown.com/icon.png']
    },
    networks: [
      {
        methods: ['sui_signPersonalMessage'],
        chains: [suiMainnet as CustomCaipNetwork],
        events: [],
        namespace: 'sui'
      },
      {
        methods: ['stx_signMessage'],
        chains: [stacksMainnet as CustomCaipNetwork],
        events: ['stx_chainChanged'],
        namespace: 'stacks'
      }
    ]
  })

  return universalConnector
}
In de App.vue file you can add : 
<script lang="ts">
import { ref, onMounted, watch } from 'vue'
import { UniversalConnector } from '@reown/appkit-universal-connector'
import { getUniversalConnector } from './config/index'

export default {
  name: "App",
  setup() {
    const universalConnector = ref<UniversalConnector>()
    const session = ref<any>()

    onMounted(async () => {
      const connector = await getUniversalConnector()
      universalConnector.value = connector
    })

    watch(() => universalConnector.value?.provider.session, (newSession) => {
      session.value = newSession
    })
    return {
      universalConnector,
      session
    }
  }
};
</script>

​
Trigger the modal

To open AppKit Core you need to call the connect function from the Universal Connector. 
<template>
  <div>
    <button @click="handleConnect">Open</button>
  </div>
</template>

...
    
async handleConnect() {
      if (!universalConnector) {
        return
      }
  
      const { session: providerSession } = await universalConnector.connect()
    }

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