use-rainbowkit-vue
v0.4.6
Published
A vue plugin for rainbowkit. (Not official) Based on [@wagmi/vue](https://github.com/wevm/wagmi)
Downloads
725
Maintainers
Readme
Rainbowkit Vue Plugin
A vue plugin for rainbowkit. (Not official) Based on @wagmi/vue
Installation
Install rainbowkit-vue and its wagmi vue, viem peer dependencies.
npm install @wagmi/vue viem @tanstack/vue-query use-rainbowkit-vue
Setup
If found error such as buffer not defined or any node module not defined, install or setup polyfill.
import { createApp } from 'vue'
import {
RainbowKitVuePlugin,
mainnet,
zkSync,
scroll,
polygonZkEvm,
immutableZkEvm,
avalanche
} from 'use-rainbowkit-vue'
import 'use-rainbowkit-vue/style.css';
///All options are optional, except 'appName', 'projectId' and 'chains' options.
createApp(App).use(RainbowKitVuePlugin,{
appName: 'RainbowKit demo',
projectId: "YOUR_PROJECT_ID",
chains: [
mainnet,
zkSync,
scroll,
polygonZkEvm,
immutableZkEvm,
avalanche
],
///Extra options
enableChainModalOnConnect: false, /// by default is true
connectModalTeleportTarget: '#rainbowkit-modal', /// Make sure this element exists
chainModalTeleportTarget: '#rainbowkit-modal', /// Make sure this element exists
accountModalTeleportTarget: "#rainbowkit-modal", /// Make sure this element exists
currencyAddress: '0x95ad61b0a150d79219dcf64e1e6cc01f0b64c4ce',
connectModalIntro: (/*{ compactModalEnabled, getWallet }*/)=>{
return ()=>{
return h('div','You can start your journey here by using web3 wallet.');
}
},
})
Use of Rainbowkit Components with <script setup>
<script lang="ts" setup>
import { RainbowKitProvider, ConnectButton } from "use-rainbowkit-vue";
</script>
<template>
<div class="content">
<RainbowKitProvider>
<ConnectButton />
</RainbowKitProvider>
</div>
</template>
Credits
License
Licensed under the MIT License.