can this work in quasar?

[bobolat]

i tried to use this but in quasar root folder didnt have main.js. Can this work on quasar? I can;t find any resource for this

[devbaji]

@bobolat You don't need to initialise plugin inside a main.js, instead you can directly import the component and use it with client-id prop

<script setup>
import { GoogleLogin } from "vue3-google-login";
const callback = (response) => {
  console.log("Handle the response", response);
};
</script>

<template>
  <div>
    <GoogleLogin
      :callback="callback"
      client-id="YOUR_CLIENT_ID"
    />
  </div>
</template>

:bulb: Use <q-no-ssr> component if your app is running in SSR mode. See here

[Jizazim]

@bobolat in quasar you use boot files to access the "main.js". So you can create a boot file called googleLogin.ts and in it add the following code (remember to update your quasar.config to include this boot file):

import { boot } from 'quasar/wrappers';
import vue3GoogleLogin from 'vue3-google-login';

export default boot(({ app }) => {
  app.use(vue3GoogleLogin, {
  //You can add your own google client ID here or add that variable in your env file for protection.
    clientId: process.env.GOOGLE_CLIENT_ID,
  });
});

Then you can access the google login in all you components by calling:

<GoogleLogin
 :callback="callback"
 />