After following a tutorial to create a Metamask login app with Vue, I ran into some issues. The code provided lacked a defined project structure, so I decided to organize it in my own Github repo here. However, despite compiling successfully, the button to connect/install Metamask was unresponsive.
The code snippet responsible for connecting to Metamask is as follows:
<template>
<div>
<button
color="primary"
large
:disabled="buttonDisabled"
v-on:click="performAction"
>
<img src="../assets/metamaskloginbutton.png" class="metamask-logo" />
<span v-if="isMetaMaskInstalled()">Login with Metamask</span>
<span v-if="!isMetaMaskInstalled()">{{ buttonInstallText }}</span>
</button>
</div>
</template>
The function intended to check if Metamask is installed always returns false even when Metamask is indeed installed on the browser being used.
Upon consulting the code's author, I was advised that the issue might stem from not accounting for the Vuex store and suggested adding
ethereum: state => { if(process.client) { return window.ethereum } }store/index.js didn't yield successful results.
Here's how I modified the store/index.js file:
import { createStore } from "vuex";
export default createStore({
state: {},
getters: {
ethereum: () => {
if (process.client) {
return window.ethereum;
}
},
},
mutations: {},
actions: {},
modules: {},
});
I had to remove state from
ethereum: state => { if(process.client) { return window.ethereum } }isMetaMaskInstalled() function continues to return false. I suspect the placement of ethereum: state => { if(process.client) { return window.ethereum } }