Wagmi Vue

https://wagmi.sh/vue/
Admin
Wagmi Vue is a collection of Vue composition utilities for building Ethereum applications with...
Tokens:187,797
Snippets:1,706
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Basic Usage of useConnectorClient

Source: https://wagmi.sh/vue/api/composables/useConnectorClient

Use the `useConnectorClient` composable to get a Viem client. This example shows the basic setup within a Vue `<script setup>` block.

```vue
<script setup lang="ts">
import { useConnectorClient } from '@wagmi/vue'

const result = useConnectorClient()
</script>
```

--------------------------------

### Usage Example

Source: https://wagmi.sh/vue/api/connectors/safe

Example of how to use the safe connector when creating a wagmi configuration.

```APIDOC
## Usage

```ts-vue{3,7}
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { safe } from '{{connectorsPackageName}}'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [safe()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```
```

--------------------------------

### Install Coinbase Wallet SDK

Source: https://wagmi.sh/vue/api/connectors/coinbaseWallet

Install the Coinbase Wallet SDK using your preferred package manager.

```bash-vue
pnpm add @coinbase/wallet-sdk@{{connectorDependencyVersion}}
```

```bash-vue
npm install @coinbase/wallet-sdk@{{connectorDependencyVersion}}
```

```bash-vue
yarn add @coinbase/wallet-sdk@{{connectorDependencyVersion}}
```

```bash-vue
bun add @coinbase/wallet-sdk@{{connectorDependencyVersion}}
```

--------------------------------

### Install Base Account Connector

Source: https://wagmi.sh/vue/api/connectors/baseAccount

Install the Base Account SDK using your preferred package manager.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add @base-org/account@{{connectorDependencyVersion}}
```

```bash-vue [npm]
npm install @base-org/account@{{connectorDependencyVersion}}
```

```bash-vue [yarn]
yarn add @base-org/account@{{connectorDependencyVersion}}
```

```bash-vue [bun]
bun add @base-org/account@{{connectorDependencyVersion}}
```

:::
```

--------------------------------

### Usage Example

Source: https://wagmi.sh/vue/api/WagmiPlugin

Example of how to use the WagmiPlugin with your Vue application's main entry point.

```APIDOC
## Usage

::: code-group

```ts [main.ts]
import { createApp } from 'vue'
import { WagmiPlugin } from '@wagmi/vue'

import App from './App.vue'
import { config } from './config'

createApp(App)
  .use(WagmiPlugin, { config })
  .mount('#app')
```

```ts [config.ts]
import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

```
:::
```

--------------------------------

### Install Base Account Package

Source: https://wagmi.sh/vue/api/connectors/baseAccount

Install the Base Account SDK package using your preferred package manager.

```bash-vue
pnpm add @base-org/account@{{connectorDependencyVersion}}
```

```bash-vue
npm install @base-org/account@{{connectorDependencyVersion}}
```

```bash-vue
yarn add @base-org/account@{{connectorDependencyVersion}}
```

```bash-vue
bun add @base-org/account@{{connectorDependencyVersion}}
```

--------------------------------

### Install Accounts Package

Source: https://wagmi.sh/vue/api/connectors/tempoWallet

Install the `accounts` package, which is a dependency for the Tempo Wallet connector.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add accounts@{{connectorDependencyVersion}}
```

```bash-vue [npm]
npm install accounts@{{connectorDependencyVersion}}
```

```bash-vue [yarn]
yarn add accounts@{{connectorDependencyVersion}}
```

```bash-vue [bun]
bun add accounts@{{connectorDependencyVersion}}
```

:::
```

--------------------------------

### Install Porto Connector

Source: https://wagmi.sh/vue/api/connectors/porto

Install the Porto connector package using your preferred package manager.

```bash-vue
pnpm add porto@{{connectorDependencyVersion}}
```

```bash-vue
npm install porto@{{connectorDependencyVersion}}
```

```bash-vue
yarn add porto@{{connectorDependencyVersion}}
```

```bash-vue
bun add porto@{{connectorDependencyVersion}}
```

--------------------------------

### Porto Connector Installation

Source: https://wagmi.sh/vue/api/connectors/porto

Install the Porto connector using your preferred package manager.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add porto@{{connectorDependencyVersion}}
```

```bash-vue [npm]
npm install porto@{{connectorDependencyVersion}}
```

```bash-vue [yarn]
yarn add porto@{{connectorDependencyVersion}}
```

```bash-vue [bun]
bun add porto@{{connectorDependencyVersion}}
```

:::
```

--------------------------------

### Install Wagmi with bun

Source: https://wagmi.sh/vue/installation

Use this command to install Wagmi and its peer dependencies with bun.

```bash
bun add @wagmi/vue viem@{{viemVersion}} @tanstack/vue-query
```

--------------------------------

### Usage Example

Source: https://wagmi.sh/vue/api/connectors/baseAccount

Configure your application with the baseAccount connector.

```APIDOC
## Usage

```ts-vue
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { baseAccount } from '{{connectorsPackageName}}' // [!code hl]

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [baseAccount()], // [!code hl]
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

:::warning
Before going to production, it is highly recommended to set an [`appName`](#appname) and [`appLogoUrl`](#applogourl) for your application that can be displayed upon connection to the wallet.
:::
```

--------------------------------

### Install WalletConnect Ethereum Provider

Source: https://wagmi.sh/vue/api/connectors/walletConnect

Install the WalletConnect Ethereum provider dependency using your preferred package manager.

```bash-vue
pnpm add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue
npm install @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue
yarn add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue
bun add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

--------------------------------

### Install Safe Connector Dependencies

Source: https://wagmi.sh/vue/api/connectors/safe

Install the necessary packages for the Safe connector.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash-vue [npm]
npm install @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash-vue [yarn]
yarn add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash-vue [bun]
bun add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

:::
```

--------------------------------

### Install Safe Dependencies

Source: https://wagmi.sh/vue/api/connectors/safe

Install the necessary Safe Apps provider and SDK packages using your preferred package manager.

```bash
pnpm add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash
npm install @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash
yarn add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

```bash
bun add @safe-global/safe-apps-provider@{{connectorDependencyVersions?.[0]}} @safe-global/safe-apps-sdk@{{connectorDependencyVersions?.[1]}}
```

--------------------------------

### Install WalletConnect Dependencies

Source: https://wagmi.sh/vue/api/connectors/walletConnect

Install the necessary WalletConnect Ethereum provider package using your preferred package manager.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue [npm]
npm install @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue [yarn]
yarn add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

```bash-vue [bun]
bun add @walletconnect/ethereum-provider@{{connectorDependencyVersion}}
```

:::
```

--------------------------------

### Basic Usage

Source: https://wagmi.sh/vue/api/composables/useBlockNumber

This example demonstrates the basic usage of `useBlockNumber` to get the current block number and enable watching for changes.

```APIDOC
## useBlockNumber

### Description
Enables/disables listening for block number changes. Can pass a subset of `UseWatchBlockNumberParameters` directly to `useWatchBlockNumber`.

### Method
`useBlockNumber(parameters?: UseBlockNumberParameters)

### Parameters
#### watch
`MaybeRef<boolean | UseWatchBlockNumberParameters> | undefined`

* Enables/disables listening for block number changes.
* Can pass a subset of [`UseWatchBlockNumberParameters`](/vue/api/composables/useWatchBlockNumber#parameters) directly to [`useBlockNumber`](/vue/api/composables/useWatchBlockNumber).

### Request Example
```vue
<script setup lang="ts">
import { useBlockNumber } from '@wagmi/vue'

const { data: blockNumber } = useBlockNumber({
  watch: true,
})
</script>
```
```

--------------------------------

### Basic Usage of useConnections

Source: https://wagmi.sh/vue/api/composables/useConnections

Use the `useConnections` composable in your Vue component's setup to get the active connections. This example shows a basic setup without specifying a configuration.

```vue
<script setup lang="ts">
import { useConnections } from 'wagmi'

const connections = useConnections()
</script>
```

--------------------------------

### Install MetaMask Connect Dependency

Source: https://wagmi.sh/vue/api/connectors/metaMask

Install the necessary MetaMask Connect dependency for the connector.

```APIDOC
## Install

::: code-group

```bash-vue [pnpm]
pnpm add @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue [npm]
npm install @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue [yarn]
yarn add @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue [bun]
bun add @metamask/connect-evm@{{connectorDependencyVersion}}
```

:::
```

--------------------------------

### Install Wagmi with yarn

Source: https://wagmi.sh/vue/installation

Use this command to install Wagmi and its peer dependencies with yarn.

```bash
yarn add @wagmi/vue viem@{{viemVersion}} @tanstack/vue-query
```

--------------------------------

### Install Wagmi with pnpm

Source: https://wagmi.sh/vue/installation

Use this command to install Wagmi and its peer dependencies with pnpm.

```bash
pnpm add @wagmi/vue viem@{{viemVersion}} @tanstack/vue-query
```

--------------------------------

### Install Wagmi with npm

Source: https://wagmi.sh/vue/installation

Use this command to install Wagmi and its peer dependencies with npm.

```bash
npm install @wagmi/vue viem@{{viemVersion}} @tanstack/vue-query
```

--------------------------------

### Install MetaMask Connect Dependency

Source: https://wagmi.sh/vue/api/connectors/metaMask

Install the `@metamask/connect-evm` package, which is a peer dependency for the MetaMask connector.

```bash-vue
pnpm add @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue
npm install @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue
yarn add @metamask/connect-evm@{{connectorDependencyVersion}}
```

```bash-vue
bun add @metamask/connect-evm@{{connectorDependencyVersion}}
```

--------------------------------

### Install latest Wagmi canary with bun

Source: https://wagmi.sh/vue/installation

Install the latest unreleased version of Wagmi from the canary tag using bun.

```bash
bun add {{packageName}}@canary
```

--------------------------------

### useClient

Source: https://wagmi.sh/vue/api/composables/useClient

Composable for getting Viem `Client` instance.

```APIDOC
## Import

```ts
import { useClient } from '@wagmi/vue'
```

## Usage

::: code-group

```vue [index.vue]
<script setup lang="ts">
import { useClient } from '@wagmi/vue'

const client = useClient()
</script>
```

```ts [config.ts]
import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

```
:::

## Parameters

```ts
import { type UseClientParameters } from '@wagmi/vue'
```

### chainId

`config['chains'][number]['id'] | undefined`

ID of chain to use when getting Viem Client.

::: code-group

```vue [index.vue]
<script setup lang="ts">
import { useClient } from '@wagmi/vue'
import { mainnet } from '@wagmi/vue/chains'
import { config } from './config'

const client = useClient({
  chainId: mainnet.id,
})
</script>
```

```ts [config.ts]
import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

```

:::

### config

`Config | undefined`

[`Config`](/vue/api/createConfig#config) to use instead of retrieving from the [`WagmiPlugin`](/vue/api/WagmiPlugin).

::: code-group

```vue [index.vue]
<script setup lang="ts">
import { useClient } from '@wagmi/vue'
import { config } from './config'

const client = useClient({
  config,
})
</script>
```

```ts [config.ts]
import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

```

:::

## Return Type

```ts
import { type UseClientReturnType } from '@wagmi/vue'
```

`Client | undefined`

Viem [`Client`](https://viem.sh/docs/clients/custom) instance.

## Action

* [`getClient`](/core/api/actions/getClient)
* [`watchClient`](/core/api/actions/watchClient)
```

--------------------------------

### Install Wagmi from a pull request with bun

Source: https://wagmi.sh/vue/installation

Install Wagmi from a specific pull request using the pkg.pr.new service with bun.

```bash
bun add https://pkg.pr.new/{{packageName}}@123
```

--------------------------------

### useReadContract Example

Source: https://wagmi.sh/vue/api/composables/useReadContract

This example demonstrates how to use `useReadContract` to read the `balanceOf` and `totalSupply` functions from an ERC20 contract. It includes setting up the Wagmi configuration and defining the contract's ABI.

```APIDOC
## Configuration

First, set up the Wagmi configuration with the desired chains and transports.

```javascript
import { createConfig, http, useReadContract } from '@wagmi/vue'
import { mainnet, sepolia } from 'wagmi/chains'

const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

## ABI Definition

Define the contract's ABI, specifying the functions you want to interact with.

```javascript
const abi = [
  {
    type: 'function',
    name: 'balanceOf',
    stateMutability: 'view',
    inputs: [{ name: 'account', type: 'address' }],
    outputs: [{ type: 'uint256' }],
  },
  {
    type: 'function',
    name: 'totalSupply',
    stateMutability: 'view',
    inputs: [],
    outputs: [{ name: 'supply', type: 'uint256' }],
  },
] as const
```

## Reading Contract Data

Use the `useReadContract` composable to read data from the contract. Provide the contract address, ABI, function name, and arguments.

```javascript
import { ref } from 'vue'

const account = ref('0x...') // Replace with the user's account address
const contractAddress = '0x...' // Replace with the contract address

const { data: balance, error: balanceError } = useReadContract({
  address: contractAddress,
  abi: abi,
  functionName: 'balanceOf',
  args: [account.value],
})

const { data: totalSupply, error: totalSupplyError } = useReadContract({
  address: contractAddress,
  abi: abi,
  functionName: 'totalSupply',
})
```

### Parameters

- **address** (`string`): The address of the smart contract.
- **abi** (`Abi`): The ABI of the smart contract.
- **functionName** (`string`): The name of the function to call.
- **args** (`any[]`, optional): The arguments to pass to the function.

### Return Value

The composable returns an object with the following properties:

- **data**: The result of the contract call.
- **error**: An error object if the call fails.
- **isError**: A boolean indicating if an error occurred.
- **isLoading**: A boolean indicating if the call is in progress.
- **isSuccess**: A boolean indicating if the call was successful.
- **refetch**: A function to refetch the data.
```

--------------------------------

### Install Wagmi from a pull request with yarn

Source: https://wagmi.sh/vue/installation

Install Wagmi from a specific pull request using the pkg.pr.new service with yarn.

```bash
yarn add https://pkg.pr.new/{{packageName}}@123
```

--------------------------------

### Install Wagmi from a pull request with npm

Source: https://wagmi.sh/vue/installation

Install Wagmi from a specific pull request using the pkg.pr.new service with npm.

```bash
npm install https://pkg.pr.new/{{packageName}}@123
```

--------------------------------

### Install latest Wagmi canary with npm

Source: https://wagmi.sh/vue/installation

Install the latest unreleased version of Wagmi from the canary tag using npm.

```bash
npm install {{packageName}}@canary
```

--------------------------------

### Install latest Wagmi canary with yarn

Source: https://wagmi.sh/vue/installation

Install the latest unreleased version of Wagmi from the canary tag using yarn.

```bash
yarn add {{packageName}}@canary
```

--------------------------------

### Install Wagmi from a pull request with pnpm

Source: https://wagmi.sh/vue/installation

Install Wagmi from a specific pull request using the pkg.pr.new service with pnpm.

```bash
pnpm add https://pkg.pr.new/{{packageName}}@123
```

--------------------------------

### useBytecode with Config

Source: https://wagmi.sh/vue/api/composables/useBytecode

Example of using `useBytecode` with a custom `config` object.

```APIDOC
## useBytecode with Config

### Description
Fetches the bytecode for a given contract address using a provided configuration.

### Method
`useBytecode`

### Parameters
#### Arguments
- **address** (string) - The contract address to fetch bytecode for.
- **config** (Config) - The Wagmi configuration to use.

### Request Example
```vue
<script setup lang="ts">
import { useBytecode } from '@wagmi/vue'
import { config } from './config'

const { data: byteCode } = useBytecode({
  address: '0xFBA3912Ca04dd458c843e2EE08967fC04f3579c2',
  config,
})
</script>

<template>
  Byte Code: {{ byteCode }}
</template>
```
```

--------------------------------

### Install latest Wagmi canary with pnpm

Source: https://wagmi.sh/vue/installation

Install the latest unreleased version of Wagmi from the canary tag using pnpm.

```bash
pnpm add {{packageName}}@canary
```

--------------------------------

### Install TanStack Vue Query Devtools

Source: https://wagmi.sh/vue/guides/tanstack-query

Install the TanStack Vue Query Devtools package using your preferred package manager.

```bash
pnpm i @tanstack/vue-query-devtools
```

```bash
npm i @tanstack/vue-query-devtools
```

```bash
yarn add @tanstack/vue-query-devtools
```

```bash
bun i @tanstack/vue-query-devtools
```

--------------------------------

### useReadContract Example

Source: https://wagmi.sh/vue/api/composables/useReadContract

This example demonstrates how to use `useReadContract` to read the `balanceOf` function from an ERC20 token contract. It includes setting up the Wagmi configuration and defining the contract's ABI.

```APIDOC
## useReadContract

### Description
A Vue composable for reading contract data.

### Usage
```ts
import { createConfig, http, useReadContract } from '@wagmi/vue'
import { mainnet, sepolia } from 'wagmi/chains'

const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

const result = useReadContract({
  abi: [
    {
      type: 'function',
      name: 'balanceOf',
      stateMutability: 'view',
      inputs: [{ name: 'account', type: 'address' }],
      outputs: [{ type: 'uint256' }],
    },
    {
      type: 'function',
      name: 'totalSupply',
      stateMutability: 'view',
      inputs: [],
      outputs: [{ name: 'supply', type: 'uint256' }],
    },
  ],
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  functionName: 'balanceOf',
  args: ['0x6b175474e89094c44da98b954eedeac495271d0f'],
})

// Access the data
result.data
```

### Parameters
- **abi**: `Abi` - The contract's ABI.
- **address**: `Address` - The contract address.
- **functionName**: `string` - The name of the function to call.
- **args**: `readonly unknown[]` - Arguments for the function call.

### Returns
- `data`: `TData | undefined` - The data returned from the contract call.
- `isLoading`: `boolean` - Indicates if the data is currently being fetched.
- `isFetching`: `boolean` - Indicates if the data is currently being refetched.
- `isError`: `boolean` - Indicates if an error occurred during the fetch.
- `error`: `Error | null` - The error object if an error occurred.

### Type Inference
With the `abi` set up correctly, TypeScript will infer the correct types for `functionName`, `args`, and the return type.
```

--------------------------------

### Install Tempo Wallet Dependency

Source: https://wagmi.sh/vue/api/connectors/tempoWallet

Install the accounts package which is a dependency for the Tempo Wallet connector. Use your preferred package manager (pnpm, npm, yarn, bun).

```bash-vue
pnpm add accounts@{{connectorDependencyVersion}}
```

```bash-vue
npm install accounts@{{connectorDependencyVersion}}
```

```bash-vue
yarn add accounts@{{connectorDependencyVersion}}
```

```bash-vue
bun add accounts@{{connectorDependencyVersion}}
```

--------------------------------

### Get Configured Chains in Vue

Source: https://wagmi.sh/vue/api/composables/useChains

Use the `useChains` composable within a Vue component's setup to access the configured chains. Ensure `@wagmi/vue` is installed and configured.

```vue
<script setup lang="ts">
import { useChains } from '@wagmi/vue'

const chains = useChains()
</script>
```

--------------------------------

### Get Viem Client Instance

Source: https://wagmi.sh/vue/api/composables/useClient

Use the `useClient` composable within your Vue component's setup to get the Viem `Client` instance.

```vue
<script setup lang="ts">
import { useClient } from '@wagmi/vue'

const client = useClient()
</script>
```

--------------------------------

### Get Viem Client for a Specific Chain

Source: https://wagmi.sh/vue/api/composables/useClient

To get the Viem `Client` for a specific chain, pass the `chainId` option to the `useClient` composable. Ensure the chain is configured in your Wagmi setup.

```vue
<script setup lang="ts">
import { useClient } from '@wagmi/vue'
import { mainnet } from '@wagmi/vue/chains'
import { config } from './config'

const client = useClient({
  chainId: mainnet.id,
})
</script>
```

```typescript
import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Get Config using useConfig

Source: https://wagmi.sh/vue/api/composables/useConfig

Use the `useConfig` composable within your Vue component's setup to retrieve the `Config` object. This object contains all the configuration details for Wagmi.

```vue
<script setup lang="ts">
import { useConfig } from 'wagmi'

const config = useConfig()
</script>
```

--------------------------------

### Basic Usage of useSwitchChain

Source: https://wagmi.sh/vue/api/composables/useSwitchChain

Use `useSwitchChain` to get a mutate function for switching chains. This example iterates through available chains and allows users to click a button to switch to a selected chain.

```vue
<script setup lang="ts">
import { useChains, useSwitchChain } from '@wagmi/vue'

const switchChain = useSwitchChain()
const chains = useSwitchChains()
</script>

<template>
  <div>
    <button 
      v-for="chain in chains"
      :key="chain.id"
      @click="switchChain.mutate({ chainId: chain.id })"
    >
      {{ chain.name }}
    </button>
  </div>
</template>
```

--------------------------------

### create-wagmi CLI Prompts

Source: https://wagmi.sh/vue/getting-started

Example output of the create-wagmi CLI prompts, showing project name and framework selection.

```ansi
Project name: wagmi-project
Select a framework: Vue / Vanilla
...
```

--------------------------------

### Build and link Wagmi from source

Source: https://wagmi.sh/vue/installation

Clone the Wagmi repository, build it, and link it locally for development.

```bash
gh repo clone wevm/wagmi
cd wagmi
pnpm install
pnpm build
cd packages/{{packageDir}}
pnpm link --global
```

--------------------------------

### Create Wagmi Project with bun

Source: https://wagmi.sh/vue/getting-started

Use this command to create a new Wagmi project with bun. It sets up TypeScript and installs required dependencies.

```bash
bun create wagmi
```

--------------------------------

### Basic Usage with createConfig

Source: https://wagmi.sh/vue/api/connectors/injected

Demonstrates how to include the `injected` connector when creating your application's configuration.

```APIDOC
## Usage

```ts-vue{3,7}
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { injected } from '{{connectorsPackageName}}'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [injected()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```
```

--------------------------------

### Main Application Entrypoint with Wagmi and Vue Query

Source: https://wagmi.sh/vue/guides/connect-wallet

Sets up the Vue application by mounting the root component and injecting the Wagmi and Vue Query plugins. Ensure `config` is imported from your Wagmi configuration file.

```typescript
// 1. Import modules.
import { VueQueryPlugin } from '@tanstack/vue-query'
import { WagmiPlugin } from '@wagmi/vue'
import { createApp } from 'vue'

import App from './App.vue'
import { config } from './wagmi'

createApp(App)
  // 2. Inject the Wagmi plugin.
  .use(WagmiPlugin, { config })
  // 3. Inject the Vue Query plugin.
  .use(VueQueryPlugin, {})
  .mount('#app')

```

--------------------------------

### Configure Client Creation

Source: https://wagmi.sh/vue/api/createConfig

Provide a function to create new Viem `Client` objects, offering more control over internal client creation logic.

```vue
import { createClient, http } from 'viem' // [!code focus]
import { createConfig } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'

const config = createConfig({
  chains: [mainnet, sepolia],
  client({ chain }) { // [!code focus]
    return createClient({ chain, transport: http('https://...') }) // [!code focus]
  }, // [!code focus]
})
```

--------------------------------

### Create Config with Mock Connector

Source: https://wagmi.sh/vue/api/connectors/mock

Create a Wagmi configuration with the mock connector. This example shows how to provide a list of accounts to the mock connector.

```typescript
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { mock } from '{{connectorsPackageName}}'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    mock({
      accounts: [
        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
        '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
        '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
      ],
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Create Configuration

Source: https://wagmi.sh/vue/api/createConfig

Creates a new Viem Client object. This is the primary way to set up wagmi with your desired chains and transports.

```ts-vue
import { config } from './config'

const client = config.getClient({ chainId: 1 })
```

```ts-vue
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://mainnet.example.com'),
    [sepolia.id]: http('https://sepolia.example.com'),
  },
})
```

--------------------------------

### Basic Usage of useSimulateContract

Source: https://wagmi.sh/vue/api/composables/useSimulateContract

Demonstrates basic usage of `useSimulateContract` with contract details like ABI, address, function name, and arguments.

```vue
<script setup lang="ts">
import { useSimulateContract } from '@wagmi/vue'
import { abi } from './abi'

const result = useSimulateContract({
  abi,
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  functionName: 'transferFrom',
  args: [
    '0xd2135CfB216b74109775236E36d4b433F1DF507B',
    '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e',
    123n,
  ],
})
</script>
```

```typescript
import { createConfig, http } from '@wagmi/vue'
import { mainnet, sepolia } from '@wagmi/vue/chains'

export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```

--------------------------------

### Import Tempo Wallet Connector

Source: https://wagmi.sh/vue/api/connectors/tempoWallet

Import the `tempoWallet` connector from the `{{connectorsPackageName}}` package.

```APIDOC
## Import

```ts-vue
import { tempoWallet } from '{{connectorsPackageName}}'
```
```

--------------------------------

### Basic Usage

Source: https://wagmi.sh/vue/api/connectors/metaMask

Configure Wagmi with the MetaMask connector.

```APIDOC
## Usage

```ts-vue{3,7}
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'
import { metaMask } from '{{connectorsPackageName}}'

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [metaMask()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
```
```

--------------------------------

### Basic createConfig Usage

Source: https://wagmi.sh/vue/api/createConfig

Create a basic Wagmi config with mainnet and sepolia chains and their respective transports.

```ts-vue
import { createConfig, http } from '{{packageName}}'
import { mainnet, sepolia } from '{{packageName}}/chains'

const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://mainnet.example.com'),
    [sepolia.id]: http('https://sepolia.example.com'),
  },
})
```

--------------------------------

### Get Current Chain ID

Source: https://wagmi.sh/vue/api/composables/useChainId

Use the `useChainId` composable to get the current chain ID. This value is reactive and will update automatically if the chain changes.

```vue
<script setup lang="ts">
import { useChainId } from '@wagmi/vue'

const chainId = useChainId()
</script>
```

--------------------------------

### Watch Contract Event Example

Source: https://wagmi.sh/vue/api/composables/useWatchContractEvent

Set up a watcher for a contract event. This example listens for 'Transfer' events on a specific ERC-20 token contract and logs any new events.

```typescript
import { useWatchContractEvent } from '@wagmi/vue'
import { abi } from './abi'

useWatchContractEvent({
  address: '0x6b175474e89094c44da98b954eedeac495271d0f',
  abi,
  eventName: 'Transfer',
  onLogs(logs) {
    console.log('New logs!', logs)
  },
})
```

--------------------------------

### useConnection

Source: https://wagmi.sh/vue/api/composables/useConnection

Composable for getting current connection.

```APIDOC
## useConnection

Composable for getting current connection.

### Import

```ts
import { useConnection } from '@wagmi/vue'
```

### Usage

```vue
<script setup lang="ts">
import { useConnection } from '@wagmi/vue'

const connection = useConnection()
</script>

<template>
  Address: {{ connection.address }}
</template>
```

### Parameters

This composable does not accept any parameters.
```

--------------------------------

### Create Wagmi Project with npm

Source: https://wagmi.sh/vue/getting-started

Use this command to create a new Wagmi project with npm. It sets up TypeScript and installs required dependencies.

```bash
npm create wagmi@latest
```

--------------------------------

### useConfig

Source: https://wagmi.sh/vue/api/composables/useConfig

Composable for getting `Config` from the `WagmiPlugin`.

```APIDOC
## useConfig

### Description
Composable for getting [`Config`](/vue/api/createConfig#config) from the [`WagmiPlugin`](/vue/api/WagmiPlugin).

### Import
```ts
import { useConfig } from 'wagmi'
```

### Usage
```vue
<script setup lang="ts">
import { useConfig } from 'wagmi'

const config = useConfig()
</script>
```

### Return Type
```ts
import { type UseConfigReturnType } from 'wagmi'
```
```

--------------------------------

### Create Wagmi Project with pnpm

Source: https://wagmi.sh/vue/getting-started

Use this command to create a new Wagmi project with pnpm. It sets up TypeScript and installs required dependencies.

```bash
pnpm create wagmi
```

--------------------------------

### Mock Connector with Accounts

Source: https://wagmi.sh/vue/api/connectors/mock

Configure the mock connector with a specific list of accounts. This allows you to simulate different wallet addresses during development.

```typescript
import { mock } from '{{connectorsPackageName}}'

const connector = mock({
  accounts: [
    '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
    '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
    '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
    '0x90F79bf6EB2c4f870365E785982E1f101E93b906',
    '0x15d34aaf54267db7d7c367839aaf71a00a2c6a65',
    '0x9965507D1a55bcC2695C58ba16FB37d819B0A4dc',
    '0x976EA74026E726554dB657fA54763abd0C3a0aa9',
    '0x14dC79964da2C08b23698B3D3cc7Ca32193d9955',
    '0x23618e81E3f5cdF7f54C3d65f7FBc0aBf5B21E8f',
    '0xa0Ee7A142d267C1f36714E4a8F75612F20a79720',
  ],
})
```

--------------------------------

### useChainId

Source: https://wagmi.sh/vue/api/composables/useChainId

Composable for getting current chain ID.

```APIDOC
## useChainId

Composable for getting current chain ID.

### Import

```ts
import { useChainId } from '@wagmi/vue'
```

### Usage

```vue
<script setup lang="ts">
import { useChainId } from '@wagmi/vue'

const chainId = useChainId()
</script>
```

### Parameters

#### config

`Config | undefined`

[`Config`](/vue/api/createConfig#config) to use instead of retrieving from the [`WagmiPlugin`](/vue/api/WagmiPlugin).

```vue
<script setup lang="ts">
import { useChainId } from '@wagmi/vue'
import { config } from './config'

const chainId = useChainId({
  config,
})
</script>
```

### Return Type

`number`

Current chain ID from [`config.state.chainId`](/vue/api/createConfig#chainid).

::: info
Only returns chain IDs for chains configured via `createConfig`'s [`chains`](/vue/api/createConfig#chains) parameter.

If the active [connection](/vue/api/createConfig#connection) [`chainId`](/vue/api/createConfig#chainid-1) is not from a chain included in your Wagmi `Config`, `useChainId` will return the last configured chain ID.
:::

### Action

* [`getChainId`](/core/api/actions/getChainId)
* [`watchChainId`](/core/api/actions/watchChainId)
```
Tokens:
Raw