Skip to content

WagmiPlugin

Vue Plugin for Wagmi.

Import

ts
import { WagmiPlugin } from '@wagmi/vue'

Usage

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>
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

ts
import { type WagmiPluginProps } from '@wagmi/vue'

config

Config object to inject with context.

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>
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.
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>
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.
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>
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.

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

inject<Config | undefined>(configKey)

Released under the MIT License.