Error using google login - vue "gapi is not defined"

Question

I'm new to vue and have been trying to include a google sign in button into my webpage. However, there is an error that states that "gapi is undefined" in my mounted(). How do i fix this? I've also tried initializing gapi but I don't know where to put that.

<template>
     <div id = "signin"><div class="g-signin2">Sign in with LFA Email</div></div>
</div>

</template>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
import UserDataService from "../services/UserDataService";
export default {
    data(){
        return {
            emailAddress:"",
            signedIn:false
        };
    },
     methods:{
        onSignIn(user){
            const profile = user.getBasicProfile()
            this.emailAddress =profile.getEmail()
            console.log(this.emailAddress)
            if(this.emailAddress.indexOf("@students.org")>-1){
                UserDataService.create(this.emailAddress)
                this.signedIn = true


            }
            else{
                alert("Please sign in with an LFA Email Account")
                var auth2 = gapi.auth2.getAuthInstance();
                auth2.signOut().then(function () {
                  console.log('User signed out.');
                });
                this.signedIn=false
            }

        }
      },
      mounted() {
          gapi.signin2.render('signin', {
               'scope': 'profile email',
               'width': 240,
               'height': 50,
               'longtitle': true,
               'theme': 'dark',
               'onsuccess': this.onSuccess,
          })

      }
}


</script>
<style>
@import '../../public/stylesheet.css';

</style>

In my index.html I also have the client id. This is the tutorial I'm trying to follow. developers.google.com/identity/sign-in/web/build-button — Michael Xing '23
– Michael Xing '23, Commented Apr 8, 2020 at 12:38

Gabriel Willemann · Accepted Answer · 2020-04-09 11:47:31Z

4

You can't put this tag <script src="https://apis.google.com/js/platform.js"></script> in Single File Component.

Put this tag in your public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>t-vue</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but t-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="https://apis.google.com/js/platform.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

Besides that, you need also to remove the attributes async and defer. Because when you call the gapi variable in mounted the script didn't download yet.

The correct script is: <script src="https://apis.google.com/js/platform.js"></script>

PS: I create a minimal example that works for me, try this in your computer:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="test">Click Here</button>
    </div>
    <script src="https://apis.google.com/js/platform.js"></script>
    <script>
      let app = new Vue({
        el: '#app',
        methods: {
          test() {
            console.log('method', gapi);
          },
        },
        mounted() {
          console.log('mounted', gapi);
        },
      });
    </script>
  </body>
</html>

edited Apr 9, 2020 at 11:47

answered Apr 8, 2020 at 13:02

Gabriel Willemann

1,9211 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Michael Xing '23 Over a year ago

When I move it to the index.html, it still states that gapi is not defined.

Gabriel Willemann Over a year ago

Strange. Try to put this script inside the <head> tag.

Michael Xing '23 Over a year ago

I put it in the head tag and it still says the same error.

Michael Xing '23 Over a year ago

Should i have to initialize gapi like in this question? stackoverflow.com/questions/31144874/…

Michael Xing '23 Over a year ago

I have removed it, and now it has given me the error gapi is not defined directlly when i run it and not in the html run console.

|

LogicaLInsanity · Accepted Answer · 2021-03-25 21:36:42Z

4

Not sure if you still need help with this, but I had to explicitly assign the gapi variable I see in all these examples to window.gapi by doing this at the beginning of the Mounted() method:

let gapi = window.gapi

answered Mar 25, 2021 at 21:36

LogicaLInsanity

7575 silver badges21 bronze badges

1 Comment

Daksa Media Over a year ago

It worked! I think this should be an alternative answer.

Collectives™ on Stack Overflow

Error using google login - vue "gapi is not defined"

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related