# Getting started with the Vue SDK

> Embedded Wallets Vue SDK (formerly Web3Auth Plug and Play)

:::note[Naming]

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

:::

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

- This is a frontend SDK and must be used in a browser environment
- Basic knowledge of JavaScript and Vue

## Prerequisites

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

:::tip

See the [dashboard setup](../../dashboard/README.mdx) guide to learn more.

:::

## Installation

Install the Web3Auth Modal SDK using npm or yarn:

```bash npm2yarn
npm install --save @web3auth/modal
```

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

```ts title="web3authContext.ts"

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

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

```html title="App.vue"
<script setup lang="ts">

  // focus-next-line

</script>

<template>
  
    <!-- focus-start -->
    <Web3AuthProvider :config="web3AuthContextConfig">
      <Home />
    </Web3AuthProvider>
    <!-- focus-end -->
  
</template>
```

## Advanced configuration

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

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

:::tip

See the [advanced configuration](./advanced/README.mdx) section to learn more about each configuration option.

:::

<Tabs
  defaultValue="basic-config"
  values={[
    { label: "Basic Configuration", value: "basic-config" },
    { label: "Advanced Configuration", value: "advanced-config" },
  ]}
>

<TabItem value="basic-config">

```ts

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,
}
```

</TabItem>

<TabItem value="advanced-config">

```ts

  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,
}
```

</TabItem>

</Tabs>

## 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 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](./solana-composables/README.mdx) section.

### 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](./ethereum-composables.mdx) section.

## Troubleshooting

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

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)