Last active
September 13, 2023 10:44
-
-
Save yneear/d50bec6a36502890ac9843d3c4170175 to your computer and use it in GitHub Desktop.
Custom Google Sign-in Button Component for Nuxt 3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div @click.self="promptGoogleLogin"> | |
| <span>Sign-in with Google</span> | |
| <div style="opacity: 0;height: 0;" ref="invisibleSigninBtn"></div> | |
| </div> | |
| </template> | |
| <script lang="ts" setup> | |
| // pnpm add -D @types/google.accounts | |
| /// <reference types='google.accounts' /> | |
| const invisibleSigninBtn = ref(null) | |
| const promptGoogleLogin = () => { | |
| google.accounts.id.initialize({ | |
| client_id: 'CLIENT_ID', | |
| callback: handleCredentialResponse, | |
| }) | |
| google.accounts.id.renderButton(invisibleSigninBtn.value! as HTMLElement, { type: 'icon' }) | |
| if (invisibleSigninBtn.value) | |
| ((invisibleSigninBtn.value as HTMLElement).querySelector('div[role=button]') as HTMLElement).click() | |
| } | |
| const handleCredentialResponse = (res: google.accounts.id.CredentialResponse) => { | |
| console.log(res.credential); | |
| } | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://nuxt.com/docs/api/configuration/nuxt-config | |
| export default defineNuxtConfig({ | |
| devtools: { enabled: true }, | |
| app: { | |
| head: { | |
| script: [ | |
| { src: 'https://accounts.google.com/gsi/client?hl=en', } | |
| ] | |
| } | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment