rainbowkit_vue's Introduction

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

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 id="rainbowkit-modal"></div>
    <div class="content">
        <RainbowKitProvider>
            <ConnectButton />
        </RainbowKitProvider>
    </div>
</template>