web3-react Vue version, forked from web3-react V8, Fully compatible with web3-react(V8)'s connectors.
The state of web3-vuejs is managed by Pinia.
You can Reach the example at web3-vuejs-example.
This is a hosted version of we3-vuejs-example at https://web3-vuejs-example.vercel.app.
Add packages
yarn add pinia web3-vuejs
Use Pinia
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
import './style.css'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
eg. create a connectors/metamask
.
import { MetaMask } from '@web3-react/metamask';
import { initializeConnector } from 'web3-vuejs';
let connectorCached: ReturnType<typeof initializeConnector>;
export const useConnector = () => {
connectorCached ||= initializeConnector<MetaMask>((actions) => new MetaMask({ actions }));
return connectorCached;
}
Use useConnector
in Vue.
<script setup lang="ts">
import { onMounted } from "vue";
import { useConnector } from "../connectors/metaMask";
const [connector, { chainId, accounts, account }, store] = useConnector();
onMounted(() => {
void connector.connectEagerly().catch(() => {
console.debug("Failed to connect eagerly to metamask");
});
});
</script>
<template>
<div class="card">
<div>chainId: {{ chainId }}</div>
<div>accounts: {{ accounts }}</div>
<div>account: {{ account }}</div>
<button type="button" @click="connector.activate">activate</button>
</div>
</template>
- useProvider
- useENS
- correct connector type