Skip to main content

Migrating Vue Applications from v9 to v10

This guide focuses specifically on migrating Vue applications from Web3Auth v9 to v10. This is a supplementary guide to the main v9 to v10 migration guide.

For general migration points (chain configuration, MFA, method renames, etc.), please refer to the main migration guide.

Migrating a Vue Application

This section focuses on changes specific to migrating a Web3Auth v9 Vue application to v10 using @web3auth/modal/vue.

Vue Plugin Setup and Configuration

In Vue applications, Web3Auth is typically initialized as a plugin. The setup process involves creating a Web3Auth configuration and integrating it with your Vue application.

main.ts
import { createApp } from 'vue'
import { createWeb3AuthPlugin } from '@web3auth/modal/vue'
import App from './App.vue'
import web3AuthConfig from './web3authConfig' // see config file below

const app = createApp(App)

// Create and use the Web3Auth plugin
const web3AuthPlugin = createWeb3AuthPlugin(web3AuthConfig)
app.use(web3AuthPlugin)

app.mount('#app')
web3authConfig.ts
import { WEB3AUTH_NETWORK } from '@web3auth/modal'
import { type Web3AuthContextConfig } from '@web3auth/modal/vue'

const clientId = 'YOUR_V10_CLIENT_ID' // Get from https://dashboard.web3auth.io

const web3AuthConfig: Web3AuthContextConfig = {
web3AuthOptions: {
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
},
}

export default web3AuthConfig

Vue Composables Path and WalletServicesPlugin Updates

Previously, Vue composables were at @web3auth/modal-vue-composables. Now, they are consolidated and imported from @web3auth/modal/vue. WalletServicesPlugin functionality is also integrated into these composables, whereas previously with v9 it was imported via @web3auth/wallet-services-plugin-vue-composables.

v10 Vue Composables Usage

All composables are now streamlined under @web3auth/modal/vue:

App.vue
<template>
<div>
<button v-if="!isConnected" @click="connect">Connect Wallet</button>
<div v-else>
<p>Connected as: {{ userInfo?.name || 'Unknown' }}</p>
<button @click="disconnect">Disconnect</button>
<button @click="showWallet">Show Wallet UI</button>
</div>
</div>
</template>

<script setup lang="ts">
import {
useWeb3Auth,
useWeb3AuthConnect,
useWeb3AuthDisconnect,
useIdentityToken,
useWeb3AuthUser,
useSwitchChain,
useEnableMFA,
useManageMFA,
useWalletConnectScanner, // Wallet Services
useWalletUI, // Wallet Services
useCheckout, // Wallet Services
useSwap, // Wallet Services
useWalletServicesPlugin, // Wallet Services
} from '@web3auth/modal/vue'

const { isConnected, isInitialized } = useWeb3Auth()
const { connect } = useWeb3AuthConnect()
const { disconnect } = useWeb3AuthDisconnect()
const { userInfo } = useWeb3AuthUser()
const { showWalletUI } = useWalletUI()

const showWallet = async () => {
try {
await showWalletUI()
} catch (error) {
console.error('Error showing wallet UI:', error)
}
}
</script>

Vue Composable Structure

The new composable structure is more granular:

  • Core Web3Auth:
    • useWeb3Auth: Core composable for Web3Auth initialization and state management.
  • Authentication:
    • useWeb3AuthConnect: Handles Web3Auth connection processes.
    • useWeb3AuthDisconnect: Manages disconnection from Web3Auth.
  • Identity:
    • useIdentityToken: Retrieves and manages identity tokens.
    • useWeb3AuthUser: Provides access to the authenticated user's information.
  • Blockchain:
    • useSwitchChain: Allows switching between different blockchain networks.
  • MFA:
    • useEnableMFA: Enables Multi-Factor Authentication (MFA) for enhanced security.
    • useManageMFA: Provides functionality to manage MFA settings.
  • Wallet Services Plugin (now integrated):
    • useWalletServicesPlugin: Composable to access the Wallet Services Plugin context and its functions.
    • useWalletConnectScanner: Integrates WalletConnect scanner functionality.
    • useWalletUI: Manages wallet UI components and user interactions.
    • useCheckout: Facilitates cryptocurrency checkout processes.
    • useSwap: Enables token swapping capabilities.

Please refer to the Vue Modal SDK documentation for the SDK reference.

Common Vue Migration Patterns

Here are some common migration patterns when updating your Vue application from v9 to v10:

Updating Existing Vue Components

If you have existing Vue components using v9 composables, here's how to migrate them:

v9 Example:

<script setup lang="ts">
import { useWeb3Auth } from '@web3auth/modal-vue-composables'
import { useWalletServicesPlugin } from '@web3auth/wallet-services-plugin-vue-composables'

const { web3Auth, isConnected, connect, disconnect } = useWeb3Auth()
const { isPluginConnected, showWalletUI } = useWalletServicesPlugin()
</script>

v10 Migration:

<script setup lang="ts">
import {
useWeb3Auth,
useWeb3AuthConnect,
useWeb3AuthDisconnect,
useWalletUI,
} from '@web3auth/modal/vue'

const { isConnected } = useWeb3Auth()
const { connect } = useWeb3AuthConnect()
const { disconnect } = useWeb3AuthDisconnect()
const { showWalletUI } = useWalletUI()
</script>

Error Handling and Loading States

v10 composables provide better error handling and loading state management:

<template>
<div>
<button v-if="!isConnected" @click="handleConnect" :disabled="isConnecting">
{{ isConnecting ? 'Connecting...' : 'Connect Wallet' }}
</button>
<div v-else>
<p>Connected!</p>
<button @click="handleDisconnect" :disabled="isDisconnecting">
{{ isDisconnecting ? 'Disconnecting...' : 'Disconnect' }}
</button>
</div>

<div v-if="error" class="error">Error: {{ error.message }}</div>
</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useWeb3Auth, useWeb3AuthConnect, useWeb3AuthDisconnect } from '@web3auth/modal/vue'

const { isConnected } = useWeb3Auth()
const { connect, isConnecting, error: connectError } = useWeb3AuthConnect()
const { disconnect, isDisconnecting, error: disconnectError } = useWeb3AuthDisconnect()

const error = computed(() => connectError.value || disconnectError.value)

const handleConnect = async () => {
try {
await connect()
} catch (err) {
console.error('Connection failed:', err)
}
}

const handleDisconnect = async () => {
try {
await disconnect()
} catch (err) {
console.error('Disconnection failed:', err)
}
}
</script>

Package Removal

When migrating Vue applications, ensure you remove these deprecated packages:

  • @web3auth/modal-vue-composables
  • @web3auth/wallet-services-plugin-vue-composables

Next Steps

Return to the main v9 to v10 migration guide to continue with other migration aspects like MFA configurations, method renames, and chain configuration changes.