Skip to content

MikeCheng1208/vue-metamask

Repository files navigation

vue-metamask

vueMetaMask

Testing Metamask's status with Vue

NPM version

Demo

vueMetaMask

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>

How to use init connect option

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

Methods

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


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

License

MIT.