Moralis with Vue projects

I’m currently working on a vue project with moralis, I installed moralis and web3 via npm command, and when I add a login function, I can’t get it working,here is the code:

<template>
<button @click="login">
  login with Metamask
</button>
</template>
<script>
import { defineComponent} from 'vue';
import Web3 from 'web3';
import Moralis from 'moralis';
export default defineComponent({
  name: 'App',
  setup(){
    Moralis.initialize('This is provided');
    Moralis.serverURL = 'This is provided';
    async function login(){
      console.log('login clicked')
      var user = Moralis.Web3.authenticate();
      if(user){
        console.log(user)
      }
    }
    return{
      login,
    }
  }
})
</script>

And I get this error:

Uncaught (in promise) TypeError: MWeb3 is not a constructor
    at eval (moralis.js?ab09:4569)
    at tryCatch (moralis.js?ab09:24181)
    at Generator.invoke [as _invoke] (moralis.js?ab09:24411)
    at Generator.eval [as next] (moralis.js?ab09:24236)
    at asyncGeneratorStep (moralis.js?ab09:23628)
    at _next (moralis.js?ab09:23650)
    at eval (moralis.js?ab09:23657)
    at new Promise (<anonymous>)
    at new Wrapper (moralis.js?ab09:26646)
    at Function.eval (moralis.js?ab09:23646)
eval @ moralis.js?ab09:4569
tryCatch @ moralis.js?ab09:24181
invoke @ moralis.js?ab09:24411
eval @ moralis.js?ab09:24236
asyncGeneratorStep @ moralis.js?ab09:23628
_next @ moralis.js?ab09:23650
eval @ moralis.js?ab09:23657
Wrapper @ moralis.js?ab09:26646
eval @ moralis.js?ab09:23646
eval @ moralis.js?ab09:4596
eval @ moralis.js?ab09:4668
tryCatch @ moralis.js?ab09:24181
invoke @ moralis.js?ab09:24411
eval @ moralis.js?ab09:24236
asyncGeneratorStep @ moralis.js?ab09:23628
_next @ moralis.js?ab09:23650
Promise.then (async)
asyncGeneratorStep @ moralis.js?ab09:23638
_next @ moralis.js?ab09:23650
Promise.then (async)
asyncGeneratorStep @ moralis.js?ab09:23638
_next @ moralis.js?ab09:23650
eval @ moralis.js?ab09:23657
Wrapper @ moralis.js?ab09:26646
eval @ moralis.js?ab09:23646
eval @ moralis.js?ab09:4746
login @ App.vue?3dfd:18
Object.onClick._cache.<computed>._cache.<computed> @ App.vue?3dfd:2
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:333

image

How can I fix this? It seems moralis is not successfully imported ?

1 Like

Hey @tigerkev, hope you are ok.

are you sure MWeb3 is the package name for web3?? Maybe this could help: https://web3js.readthedocs.io/en/v1.3.4/getting-started.html#adding-web3-js

Carlos Z

2 Likes

Thanks for the help ,the issue has been solved

1 Like

How did you solve it? Was it simple or complex?

Sorry I kind of forgot how I solved, the second day I turn to use react-moralis , this is easier.

1 Like

Yes, React can be easier, there is a larger community, but I do feel that https://vuetifyjs.com is a powerful tool.

1 Like