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

# useWalletConnectScanner

Composable to show the WalletConnect QR scanner using the Wallet Services plugin in Vue.

info

Please note that this composable doesn't work for external wallet logins. It only works for social login embedded wallets.

### Import

```ts
import { useWalletConnectScanner } from '@web3auth/modal/vue'

```

### Usage

```html
<script setup>
  import { useWalletConnectScanner } from '@web3auth/modal/vue'

  const { showWalletConnectScanner, loading, error } = useWalletConnectScanner()
</script>

<template>
  <button @click="showWalletConnectScanner()" :disabled="loading">
    {{ loading ? "Opening Scanner..." : "Show WalletConnect Scanner" }}
  </button>
  <div v-if="error">{{ error.message }}</div>
</template>

```

### Return type

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

```

#### `loading`

`boolean`

Whether the scanner opening process is in progress.

#### `error`

`Web3AuthError | null`

Error that occurred during the scanner opening process.

#### showWalletConnectScanner

`(showWalletConnectScannerParams?: BaseEmbedControllerState["showWalletConnect"]) => Promise<void>`

Function to show the WalletConnect QR scanner. Accepts optional parameters for customizing the scanner behavior.