# useSwitchChain

> @web3auth/modal Vue Composables useSwitchChain | Embedded Wallets

Composable to switch blockchain networks with Embedded Wallets in Vue.

### Import

```ts

```

### Usage

```html
<script setup lang="ts">

  const { switchChain, loading, error } = useSwitchChain()
</script>

<template>
  <button @click="switchChain('0x1')" :disabled="loading">
    {{ loading ? "Switching..." : "Switch to Ethereum Mainnet" }}
  </button>
  Error: {{ error.message }}
</template>
```

### Return type

```ts

```

#### `loading`

`boolean`

Whether the chain switching process is in progress.

#### `error`

`Web3AuthError | null`

Error that occurred during the chain switching process.

#### `switchChain`

`(chainId: string) => Promise<void>`

Function to initiate the chain switch. Pass the target `chainId` as a string (for example, "0x1" for Ethereum Mainnet).

## Example

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

  const { web3Auth } = useWeb3Auth()
  const { switchChain, error } = useSwitchChain()

  const currentChainName = computed(() => web3Auth.value?.currentChain?.displayName || '')
</script>

<template>
  
    Switch Chain
    Connected to {{ currentChainName }}
    <button
      v-for="chain in web3Auth.value?.coreOptions?.chains"
      :key="chain.chainId"
      :disabled="web3Auth?.currentChain?.chainId === chain.chainId"
      @click="switchChain({ chainId: chain.chainId })"
      type="button"
      class="card">
      {{ chain.displayName }}
    </button>
    {{ error.message }}
  
</template>
```