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

# useSwitchChain

Composable to switch blockchain networks with Embedded Wallets in Vue.

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

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

```

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

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

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

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

```

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

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

```

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

`boolean`

Whether the chain switching process is in progress.

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

`Web3AuthError | null`

Error that occurred during the chain switching process.

#### `switchChain`[​](#switchchain "Direct link to 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[​](#example "Direct link to Example")

switchChain.vue

```
<script setup lang="ts">
  import { useWeb3Auth, useSwitchChain } from '@web3auth/modal/vue'
  import { computed } from 'vue'

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

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

<template>
  <div>
    <h2>Switch Chain</h2>
    <h3>Connected to {{ currentChainName }}</h3>
    <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>
    <div v-if="error" class="error">{{ error.message }}</div>
  </div>
</template>

```