[SOLVED] Vuejs 2 and Moralis

Moralis General
#1

Hi im new in Moralis, and in programming at all,

im working on a vuejs version2, vuetify, moralis, and web 3

im making the sign in and sign out functions, but seems that doesnt work, and no error appears when i run it,

this is my component:

<template>
<div>
  <div>
      <button v-on:click="logIn()" id="btn">LogIn</button>
    </div>
      <div>
      <button v-on:click="logOUT()" id="btn">LogOUT</button>
    </div>
  </div>
</template>
<script>
const Moralis = require("moralis");
const serverUrl = process.env.VUE_APP_MORALIS_SERVER_URL;
const appId = process.env.VUE_APP_MORALIS_APPLICATION_ID;


Moralis.start({ serverUrl, appId });

export default {
  name: "loginMetamask",
  components: {},
  data() {
    return {
      walletAddress: "",
      metaData: {},
      contractAddress: "",
      walletBalance: []
    };
  },
methods: {
    async logIn() {
    Moralis.start({ serverUrl, appId });
    window.Moralis = Moralis;
    await Moralis.authenticate();
    },
    async logOUT() {
      Moralis.User.logOut();
      console.log("logged out");
    },
},
}
</script>

help!

#2

If you want to sign in, you should use Moralis.authenticate(), not Moralis.enableWeb3().

Are you calling the functions from the same component? Something like <button v-on:click="logIn()">Login MetaMask</button>.

May be easier to use Vue 3 as well as there are boilerplates like https://github.com/hypescale/moralis-vue-boilerplate

1 Like
#3

I made the changes, still doesnt work

#4

So clicking the buttons don’t do anything? No errors in browser console? Your exact code is bringing up MetaMask for me when I click LogIn.

1 Like
#5

in the inspector console bring this:

vue.runtime.esm.js?c320:619 [Vue warn]: Error in v-on handler (Promise/async): "Error: You need to call Moralis.start with an applicationId before using Moralis."

found in

---> <VBtn>
       <LoginMetamask> at src/components/loginMetamask.vue
         <VApp>
           <App> at src/App.vue
             <Root>
#6

Does this happen when you click login or on app startup?

Try this code instead with hardcoded serverUrl and appId first:

/components/loginMetamask.vue

<template>
  <div>
    <div>
      <button v-on:click="logIn()" id="btn">LogIn</button>
    </div>
    <div>
      <button v-on:click="logOUT()" id="btn">LogOUT</button>
    </div>
  </div>
</template>

<script>
import Moralis from 'moralis';

const serverUrl = "serverUrl";
const appId = "appId";

Moralis.start({ serverUrl, appId });

export default {
  name: 'loginMetamask',

  data: () => ({
    //
  }),

  methods: {
    async logIn() {
      await Moralis.authenticate();

      console.log('Address', Moralis.User.current().get('ethAddress'));
    },
    async logOUT() {
      await Moralis.User.logOut();

      console.log('Logged out.', Moralis.User.current());
    },
  },
};
</script>

And then something similar in App.vue

<template>
  <v-app>
    <v-main>
      <LoginMetamask />
    </v-main>
  </v-app>
</template>

<script>
import LoginMetamask from './components/loginMetamask';

export default {
  name: 'App',

  components: {
    LoginMetamask,
  },
};
</script>
1 Like
#7

thank u very much!! my friend, this is [SOLVED]