Currently, I am in the process of integrating Google authentication into my Vue.js front end. The project was initialized using CLI with TypeScript and component style syntax enabled, alongside other configurations. Additionally, there is a backend web server associated with this project. Despite being new to Vue.js and gapi, I have been following this guide provided by Google. However, I am unsure about how to load
<script src="https://apis.google.com/js/platform.js" async defer></script>Here are snippets from different parts of the project:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Login</router-link>
</div>
<router-view />
</div>
</template>
<style lang="scss">
</style>
Main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Login.vue (View)
<template>
<div>
<Login />
</div>
</template>
<script>
// @ is an alias to /src
import Login from "@/components/Login.vue";
export default {
name: "login",
components: {
Login
}
};
</script>
Login.vue (Component)
<template>
<div>
<button>Sign in with Google</button>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
@Component
export default class Login extends Vue {}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>