Testing Metamask's status with Vue
MetaMask will introduce an optional “Privacy Mode”, which requires that dapps ask permission to view users’ accounts. Dapps should update their code to support this feature, which will be enabled by default in the future.
Reference link
NPM Install
npm i vue-metamask -S
And then import it:
<script setup>
import { ref } from "vue";
import VueMetamask from "vue-metamask";
const msg = ref("This is demo net work");
const complete = (data) => {
console.log("GET INFO =>", data);
};
</script>
Use
<template>
<div id="demo">
<vue-metamask
userMessage="msg"
@complete="onComplete"
>
</vue-metamask>
</div>
</template>
<script setup>
import { ref } from "vue";
import VueMetamask from "vue-metamask";
const metamask = ref(null);
const connect = () => {
// Get ref target use init methods
metamask.value.init();
};
</script>
<template>
<div id="demo">
// close init connect
<vue-metamask ref="metamask" :init-connect="false"></vue-metamask>
// click button call Init
<button @click="connect">connect</button>
</div>
</template>
data | type | value | Functionality |
---|---|---|---|
initConnect | Boolean | true (default) | Whether to connect initially |
userMessage ( Optional ) | String | Message | return setting status message |
complete | Event | Callback | return current data |
key | type | value | Description |
---|---|---|---|
web3 | Object | function | web3 |
metaMaskAddress | String | 0x09F38A7F... | Metamask address |
message | String | "message" | User-defined message |
type | String | "MAINNET" | MAINNET NO_INSTALL_METAMASK NO_LOGIN NETWORK_ERROR USER_DENIED_ACCOUNT_AUTHORIZATION |
netID | String | 1n | User's current network id |
MIT.