useClient

Composable for getting Viem Client instance.

Import

import { useClient } from '@wagmi/vue'

Usage

index.vue

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

const client = useClient()
</script>

config.ts

import { http, createConfig } 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

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

chainId

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

ID of chain to use when getting Viem Client.

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>

config.ts

import { http, createConfig } 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 to use instead of retrieving from the WagmiPlugin.

index.vue

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

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

config.ts

import { http, createConfig } 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

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

Client | undefined

Viem Client instance.

Action

• getClient
• watchClient