title: How to load load google's api.js file in to my vue project
body: <p>I am trying to integrate google calendar in to my vue project. I am following <a href="https://forum.vuejs.org/t/how-to-integrate-google-calendar/31218/7" rel="nofollow noreferrer">https://forum.vuejs.org/t/how-to-integrate-google-calendar/31218/7</a>  this and there I found this example <a href="https://jsfiddle.net/andrisv/nqwdymee/" rel="nofollow noreferrer">https://jsfiddle.net/andrisv/nqwdymee/</a>.</p>
  <p>my vue file is like this,</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;div class='authentification'&gt;
        &lt;h2&gt;VueJS + Google Calendar Example&lt;/h2&gt;
        Authentification
        &lt;button v-if='!authorized' @click=&quot;handleAuthClick&quot;&gt;Sign In&lt;/button&gt;
        &lt;button v-if='authorized' @click=&quot;handleSignoutClick&quot;&gt;Sign Out&lt;/button&gt;
      &lt;/div&gt;
      &lt;hr&gt;
      &lt;button v-if='authorized' @click=&quot;getData&quot;&gt;Get Data&lt;/button&gt;
      &lt;div class=&quot;item-container&quot; v-if=&quot;authorized &amp;&amp; items&quot;&gt;
        &lt;pre v-html=&quot;items&quot;&gt;&lt;/pre&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  
  
  &lt;script async defer src=&quot;https://apis.google.com/js/api.js&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
    const CLIENT_ID = '';
    const API_KEY = '';
    const DISCOVERY_DOCS = ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'];
    const SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
    export default {
      data() {
        return {
          items: undefined,
          api: undefined,
          authorized: false
        }
      },
      created() {
        this.api = gapi;
        this.handleClientLoad();
      },
      methods: {
        /**
         *  On load, called to load the auth2 library and API client library.
         */
        handleClientLoad() {
          this.api.load('client:auth2', this.initClient);
        },
  
        /**
         *  Initializes the API client library and sets up sign-in state
         *  listeners.
         */
        initClient() {
          let vm = this;
          vm.api.client.init({
            apiKey: API_KEY,
            clientId: CLIENT_ID,
            discoveryDocs: DISCOVERY_DOCS,
            scope: SCOPES
          }).then(_ =&gt; {
            // Listen for sign-in state changes.
            vm.api.auth2.getAuthInstance().isSignedIn.listen(vm.authorized);
          });
        },
  
        /**
         *  Sign in the user upon button click.
         */
        handleAuthClick(event) {
          Promise.resolve(this.api.auth2.getAuthInstance().signIn())
            .then(_ =&gt; {
              this.authorized = true;
            });
        },
  
        /**
         *  Sign out the user upon button click.
         */
        handleSignoutClick(event) {
          Promise.resolve(this.api.auth2.getAuthInstance().signOut())
            .then(_ =&gt; {
              this.authorized = false;
            });
        },
  
        /**
         * Print the summary and start datetime/date of the next ten events in
         * the authorized user's calendar. If no events are found an
         * appropriate message is printed.
         */
        getData() {
          let vm = this;
  
          vm.api.client.calendar.events.list({
            'calendarId': 'primary',
            'timeMin': (new Date()).toISOString(),
            'showDeleted': false,
            'singleEvents': true,
            'maxResults': 10,
            'orderBy': 'startTime'
          }).then(response =&gt; {
            vm.items = this.syntaxHighlight(response.result.items);
            console.log(vm.items);
          });
        },
        syntaxHighlight(json) {
          if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
          }
          json = json.replace(/&amp;/g, '&amp;amp;').replace(/&lt;/g, '&amp;lt;').replace(/&gt;/g, '&amp;gt;');
          return json.replace(/(&quot;(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\&quot;])*&quot;(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match =&gt; {
            var cls = 'number';
            if (/^&quot;/.test(match)) {
              if (/:$/.test(match)) {
                cls = 'key';
              } else {
                cls = 'string';
              }
            } else if (/true|false/.test(match)) {
              cls = 'boolean';
            } else if (/null/.test(match)) {
              cls = 'null';
            }
            return '&lt;span class=&quot;' + cls + '&quot;&gt;' + match + '&lt;/span&gt;';
          });
        }
      }
  
    }
  &lt;/script&gt;
  </code></pre>
  <p>I am getting <code>gapi is not defined</code> error, so I loaded the <a href="https://apis.google.com/js/api.js" rel="nofollow noreferrer">https://apis.google.com/js/api.js</a> as a script. But I am still getting the error.</p>