> 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 a seamless authentication experience 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.

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

- This is a frontend SDK and must be used in a browser environment
- 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

```

```
yarn add @web3auth/modal

```

```
pnpm add @web3auth/modal

```

```
bun add @web3auth/modal

```

### 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\. Setup Web3Auth provider[​](#2-setup-web3auth-provider "Direct link to 2. Setup Web3Auth provider")

In your main component (for example, `App.vue`), import the `Web3AuthProvider` component and wrap your application with it:

App.vue

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

<template>
  <div class="min-h-screen flex flex-col">
    <Web3AuthProvider :config="web3AuthContextConfig">
      <Home />
    </Web3AuthProvider>
  </div>
</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. No additional setup is required—simply use the provided composables to interact with Solana networks.

For detailed usage and examples, see the [Solana composables](/embedded-wallets/sdk/vue/solana-composables/) section.

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

Ethereum composables are provided through the popular `wagmi` library, which works seamlessly with Web3Auth. 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")

### Bundler issues: missing dependencies[​](#bundler-issues-missing-dependencies "Direct link to Bundler issues: missing dependencies")

You might encounter errors related to missing dependencies in the browser environment:

- `Buffer is not defined`
- `process is not defined`
- Other Node.js-specific modules missing errors

These Node.js dependencies need to be polyfilled in your application. See the detailed troubleshooting guides for popular bundlers:

- **[Vite Troubleshooting Guide](/embedded-wallets/troubleshooting/vite-issues/)**
- **[Svelte Troubleshooting Guide](/embedded-wallets/troubleshooting/svelte-issues/)**
- **[Nuxt Troubleshooting Guide](/embedded-wallets/troubleshooting/nuxt-issues/)**
- **[Webpack 5 Troubleshooting Guide](/embedded-wallets/troubleshooting/webpack-issues/)**

### 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)