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

# useWeb3AuthConnect

Composable to connect to Embedded Wallets in Vue.

### Import[​](#import "Direct link to Import")

```
import { useWeb3AuthConnect } from '@web3auth/modal/vue'

```

### Choosing the right connection method[​](#choosing-the-right-connection-method "Direct link to Choosing the right connection method")

You can connect users to Embedded Wallets in two main ways, depending on your application's needs:

- **Use `connect()`** when you want to display the default Embedded Wallets/Web3Auth modal. This is ideal if you want to provide users with a pre-built, user-friendly interface where they can choose from all available login options (such as social logins, wallets) with minimal setup.
- **Use `connectTo(connector, params)`** when you want to build a fully custom login experience. This method lets you bypass the Embedded Wallets/Web3Auth modal and connect directly to a specific wallet connector (such as Google, Facebook, or a particular wallet). Choose this if you want to design your own UI for login options, or if you want to restrict users to a specific authentication method. This method also allows you to use JWT-based login configurations.

**Summary:**

- Use `connect()` for the standard modal experience.
- Use `connectTo()` for custom UIs or direct connection to a specific login method.

### Usage[​](#usage "Direct link to Usage")

- Basic Modal
- Custom UI

info

This is the most common way to connect to Embedded Wallets/Web3Auth. It opens the Web3Auth modal UI, allowing users to select from available login options.

```
<script setup lang="ts">
  import { useWeb3AuthConnect } from '@web3auth/modal/vue'

  const { connect, loading, isConnected, error } = useWeb3AuthConnect()
</script>

<template>
  <button @click="connect" :disabled="loading || isConnected">
    <span v-if="loading">Connecting...</span>
    <span v-else-if="isConnected">Connected</span>
    <span v-else>Connect</span>
  </button>
  <div v-if="error">{{ error.message }}</div>
</template>

```

info

This method allows you to build your own custom connection UI. It bypasses the Web3Auth modal UI, allowing you to create your own custom UI for login options. This can be useful if you want to hide Embedded Wallets from your end users.

```
<script setup lang="ts">
  import { useWeb3AuthConnect } from '@web3auth/modal/vue'
  import { WALLET_CONNECTORS, AUTH_CONNECTION } from '@web3auth/modal'

  const { connectTo, loading, isConnected, error } = useWeb3AuthConnect()

  const loginWithGoogle = () => {
    connectTo(WALLET_CONNECTORS.AUTH, { authConnection: AUTH_CONNECTION.GOOGLE })
  }
</script>

<template>
  <button @click="loginWithGoogle" :disabled="loading || isConnected">Login with Google</button>
  <div v-if="error">{{ error.message }}</div>
</template>

```

### Return type[​](#return-type "Direct link to Return type")

```
import type { IUseWeb3AuthConnect } from '@web3auth/modal/vue'

```

#### `isConnected`[​](#isconnected "Direct link to isconnected")

`boolean`

Whether the user is connected to Web3Auth.

#### `loading`[​](#loading "Direct link to loading")

`boolean`

Whether the connection process is in progress.

#### `error`[​](#error "Direct link to error")

`Web3AuthError | null`

Error that occurred during the connection process.

#### `connectorName`[​](#connectorname "Direct link to connectorname")

`WALLET_CONNECTOR_TYPE | null`

Name of the connected connector.

#### `connect`[​](#connect "Direct link to connect")

`() => Promise<IProvider | null>`

Function to initiate the connection process. Opens the Web3Auth modal UI.

#### `connectTo`[​](#connectto "Direct link to connectto")

`<T extends WALLET_CONNECTOR_TYPE>(connector: T, params?: LoginParamMap[T]) => Promise<IProvider | null>`

Function to connect directly to a specific wallet connector. This bypasses the Web3Auth modal UI, allowing you to build custom interfaces. This method also allows you to use JWT-based login configurations.