useAccountEffect

Composable for listening to account lifecycle events.

Import

import { useAccountEffect } from '@wagmi/vue'

Usage

index.vue

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

useAccountEffect({
  onConnect(data) {
    console.log('Connected!', data)
  },
  onDisconnect() {
    console.log('Disconnected!')
  },
})
</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 useAccountEffectParameters } from '@wagmi/vue'

config

Config | undefined

Config to use instead of retrieving from the WagmiPlugin.

index.vue

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

useAccountEffect({
  config, 
  onConnect(data) {
    console.log('Connected!', data)
  },
  onDisconnect() {
    console.log('Disconnected!')
  },
})
</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(),
  },
})

onConnect

MaybeRef<((data: { address: `0x${string}`; addresses: readonly [`0x${string}`, ...`0x${string}`[]]; chain: Chain | undefined chainId: number; connector: Connector; isReconnected: boolean }) => void)> | undefined

Callback that is called when accounts are connected.

index.tsx

import { useAccountEffect } from '@wagmi/vue'

function App() {
  useAccountEffect({
    onConnect(data) {
      console.log('Connected!', data)
    },
  })
}

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(),
  },
})

onDisconnect

MaybeRef<(() => void)> | undefined

Callback that is called when no more accounts are connected.

index.tsx

import { useAccountEffect } from '@wagmi/vue'

function App() {
  useAccountEffect({
    onDisconnect() {
      console.log('Disconnected!')
    },
  })
}

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(),
  },
})

Action

• getAccount
• watchAccount