WagmiPlugin

Vue Plugin for Wagmi.

Import

import { WagmiPlugin } from '@wagmi/vue'

Usage

app.vue

<script setup lang="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')
</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 WagmiPluginProps } from '@wagmi/vue'

config

Config object to inject with context.

app.vue

<script setup lang="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')
</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(),
  },
})

initialState

State | undefined

• Initial state to hydrate into the Wagmi Config. Useful for SSR.

app.vue

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

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

createApp(App)
  .use(WagmiPlugin, { 
    config,
    initialState: /* ... */
  })
  .mount('#app')
</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(),
  },
})

reconnectOnMount

boolean | undefined

• Whether or not to reconnect previously connected connectors on mount.
• Defaults to true.

app.vue

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

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

createApp(App)
  .use(WagmiPlugin, { 
    config,
    reconnectOnMount: false
  })
  .mount('#app')
</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(),
  },
})

configKey

Key to use to provide/inject Config via WagmiPlugin.

import { configKey, type Config } from '@wagmi/vue'
import { inject } from 'vue'

inject<Config | undefined>(configKey)