vue-metamask

Testing Metamask's status with Vue

Demo

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>
    import VueMetamask from 'vue-metamask';
    export default {
        components: {
            VueMetamask,
        },
        data(){
            return {
                msg: "This is demo net work"
            }
        },
        methods:{
            onComplete(data){
                console.log('data:', data);
            }
        }
    }
</script>

Use

<template>
    <div id="demo">
        <vue-metamask 
            userMessage="msg" 
            @onComplete="onComplete"
        >
        </vue-metamask>
    </div>
</template>

---

How to use init connect option

<template>
    <div id="demo">

        // close init connect
        <vue-metamask ref="metamask" :initConnect="false"></vue-metamask>
        
        // click button call Init
        <button @click="connect">connect</button>
    </div>
</template>

Get ref target use init methods

<script>
    import VueMetamask from 'vue-metamask';
    export default {
        components: {
            VueMetamask,
        },
        methods:{
            connect() {
                this.$refs.metamask.init();
            }
        }
    }
</script>

---

Methods

data	type	value	Functionality
initConnect	Boolean	true (default)	Whether to connect initially
userMessage （ Optional ）	String	Message	return setting status message
onComplete	Event	Callback	return current data

OnComplete return data

key	type	value	Description
web3	Object	function	web3
metaMaskAddress	String	0x09F38A7F...	Ｍetamask address
message	String	"message"	User-defined message
type	String	"MAINNET"	MAINNET NO_INSTALL_METAMASK NO_LOGIN NETWORK_ERROR USER_DENIED_ACCOUNT_AUTHORIZATION
netID	String	"1"	User's current network id

License

MIT.