> For the complete documentation index, see [llms.txt](/llms.txt).

# Getting started with the Vue SDK

Naming

Embedded Wallets SDKs were previously known as Web3Auth Plug and Play SDKs. Package names and APIs remain Web3Auth (for example, `@web3auth/modal`).

## Overview[​](#overview "Direct link to Overview")

MetaMask Embedded Wallets SDK provides authentication for Vue applications with social logins, external wallets, and more. Our Vue Composables simplifies how you connect users to their preferred wallets and manage authentication state.

Migration from v9 or v10

Use the [Web SDK v11 migration guide](/embedded-wallets/migration-guides/web/). It includes an LLM agent prompt, a full v9/v10-to-v11 API map, and step-by-step changes for `@web3auth/modal/vue`.

## Requirements[​](#requirements "Direct link to Requirements")

- This is a frontend SDK and must be used in a browser environment
- Node.js 22+ and npm 10+
- Basic knowledge of JavaScript and Vue

## Prerequisites[​](#prerequisites "Direct link to Prerequisites")

- Set up your project on the [Embedded Wallets dashboard](https://developer.metamask.io/)

tip

See the [dashboard setup](/embedded-wallets/dashboard/) guide to learn more.

## Installation[​](#installation "Direct link to Installation")

Install the Web3Auth Modal SDK using npm or yarn:

- npm
- Yarn
- pnpm
- Bun

```
npm install --save @web3auth/modal @wagmi/vue @tanstack/vue-query

```

```
yarn add @web3auth/modal @wagmi/vue @tanstack/vue-query

```

```
pnpm add @web3auth/modal @wagmi/vue @tanstack/vue-query

```

```
bun add @web3auth/modal @wagmi/vue @tanstack/vue-query

```

### 1. Configuration[​](#1-configuration "Direct link to 1. Configuration")

Create a configuration file for Web3Auth. This file will contain your Web3Auth Client ID and Network details from the [Embedded Wallets dashboard](https://developer.metamask.io/).

web3authContext.ts

```
import { type Web3AuthContextConfig } from '@web3auth/modal/vue'
import { WEB3AUTH_NETWORK, type Web3AuthOptions } from '@web3auth/modal'

const web3AuthOptions: Web3AuthOptions = {
  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable // Get your Client ID from MetaMask Developer Dashboard
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
}

const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions,
}

export default web3AuthContextConfig

```

### 2. Set up providers[​](#2-set-up-providers "Direct link to 2. Set up providers")

Register Vue Query in `main.ts` when you use Wagmi:

main.ts

```
import { VueQueryPlugin } from '@tanstack/vue-query'
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

createApp(App).use(VueQueryPlugin).mount('#app')

```

In `App.vue`, wrap your app with `Web3AuthProvider` and the Embedded Wallets `WagmiProvider`:

App.vue

```
<script setup lang="ts">
  import Home from './Home.vue'
  import { Web3AuthProvider } from '@web3auth/modal/vue'
  import { WagmiProvider } from '@web3auth/modal/vue/wagmi'
  import web3AuthContextConfig from './web3authContext'
</script>

<template>
  <Web3AuthProvider :config="web3AuthContextConfig">
    <WagmiProvider>
      <Home />
    </WagmiProvider>
  </Web3AuthProvider>
</template>

```

## Advanced configuration[​](#advanced-configuration "Direct link to Advanced configuration")

The Embedded Wallets Modal SDK offers a rich set of advanced configuration options:

- **[Smart accounts](/embedded-wallets/sdk/vue/advanced/smart-accounts/):** Configure account abstraction parameters.
- **[Custom authentication](/embedded-wallets/sdk/vue/advanced/custom-authentication/):** Define authentication methods.
- **[Whitelabeling and UI customization](/embedded-wallets/sdk/vue/advanced/whitelabel/):** Personalize the modal's appearance.
- **[Multi-Factor Authentication (MFA)](/embedded-wallets/sdk/vue/advanced/mfa/):** Set up and manage MFA.
- **[Wallet Services](/embedded-wallets/sdk/vue/advanced/wallet-services/):** Integrate additional Wallet Services.

tip

See the [advanced configuration](/embedded-wallets/sdk/vue/advanced/) section to learn more about each configuration option.

- Basic Configuration
- Advanced Configuration

```
import { type Web3AuthContextConfig } from '@web3auth/modal/vue'
import { WEB3AUTH_NETWORK, type Web3AuthOptions } from '@web3auth/modal'

const web3AuthOptions: Web3AuthOptions = {
  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, // or WEB3AUTH_NETWORK.SAPPHIRE_DEVNET
}

const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions,
}

```

```
import { type Web3AuthContextConfig } from '@web3auth/modal/vue'
import {
  WALLET_CONNECTORS,
  WEB3AUTH_NETWORK,
  MFA_LEVELS,
  type Web3AuthOptions,
} from '@web3auth/modal'

const web3AuthOptions: Web3AuthOptions = {
  clientId: 'YOUR_WEB3AUTH_CLIENT_ID', // Pass your Web3Auth Client ID, ideally using an environment variable
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  modalConfig: {
    connectors: {
      [WALLET_CONNECTORS.AUTH]: {
        label: 'auth',
        loginMethods: {
          google: {
            name: 'google login',
            // logoDark: "url to your custom logo which will shown in dark mode",
          },
          facebook: {
            name: 'facebook login',
            showOnModal: false, // hides the facebook option
          },
          email_passwordless: {
            name: 'email passwordless login',
            showOnModal: true,
            authConnectionId: 'w3a-email_passwordless-demo',
          },
          sms_passwordless: {
            name: 'sms passwordless login',
            showOnModal: true,
            authConnectionId: 'w3a-sms_passwordless-demo',
          },
        },
        showOnModal: true, // set to false to hide all social login methods
      },
    },
    hideWalletDiscovery: true, // set to true to hide external wallets discovery
  },
  mfaLevel: MFA_LEVELS.MANDATORY,
}

const web3AuthContextConfig: Web3AuthContextConfig = {
  web3AuthOptions,
}

```

## Blockchain integration[​](#blockchain-integration "Direct link to Blockchain integration")

Web3Auth is blockchain agnostic, enabling integration with any blockchain network. Out of the box, Web3Auth offers robust support for both **Solana** and **Ethereum**, each with dedicated Vue composables.

### Solana integration[​](#solana-integration "Direct link to Solana integration")

Solana composables are included natively within the `@web3auth/modal` package. Install [@solana/kit](https://www.npmjs.com/package/@solana/kit), [@solana-program/system](https://www.npmjs.com/package/@solana-program/system), and then wrap your app with `SolanaProvider`:

App.vue

```
<script setup lang="ts">
  import { Web3AuthProvider } from '@web3auth/modal/vue'
  import { SolanaProvider } from '@web3auth/modal/vue/solana'
  import web3AuthContextConfig from './web3authContext'
</script>

<template>
  <Web3AuthProvider :config="web3AuthContextConfig">
    <SolanaProvider>
      <Home />
    </SolanaProvider>
  </Web3AuthProvider>
</template>

```

Use composables from `@web3auth/modal/vue/solana`.

### Ethereum integration[​](#ethereum-integration "Direct link to Ethereum integration")

Ethereum composables are provided through [@wagmi/vue](https://wagmi.sh/vue), which works with Embedded Wallets. This allows you to leverage a wide range of Ethereum composables for account management, transactions, and more.

For implementation details and examples, refer to the [Ethereum Composables](/embedded-wallets/sdk/vue/ethereum-composables/) section.

## Troubleshooting[​](#troubleshooting "Direct link to Troubleshooting")

### JWT errors[​](#jwt-errors "Direct link to JWT errors")

When using custom authentication, you may encounter JWT errors:

- [**Invalid JWT verifiers ID field**](/embedded-wallets/troubleshooting/jwt-errors/#invalid-jwt-verifiers-id-field)
- [**Failed to verify JWS signature**](/embedded-wallets/troubleshooting/jwt-errors/#failed-to-verify-jws-signature)
- [**Duplicate token**](/embedded-wallets/troubleshooting/jwt-errors/#duplicate-token)
- [**Expired token**](/embedded-wallets/troubleshooting/jwt-errors/#expired-token)
- [**Mismatch JWT validation field**](/embedded-wallets/troubleshooting/jwt-errors/#mismatch-jwt-validation-field)