https://github.com/wavezync/vue3-google-signin
Google OAuth2 plugin for Vue3 Apps. This uses latest Google Identity Service Library. It also provides set of composables which can be used easily to implement different authentication strategies
https://github.com/wavezync/vue3-google-signin
composition-api google-3p google-auth google-authentication google-identity-services google-oauth2 google-sign-in typescript vue vue-gsi vue3 vue3-google-signin vue3-gsi vue3-typescript vuejs
Last synced: about 1 year ago
JSON representation
Google OAuth2 plugin for Vue3 Apps. This uses latest Google Identity Service Library. It also provides set of composables which can be used easily to implement different authentication strategies
- Host: GitHub
- URL: https://github.com/wavezync/vue3-google-signin
- Owner: wavezync
- License: mit
- Created: 2022-05-08T13:54:40.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-04-04T14:49:20.000Z (over 1 year ago)
- Last Synced: 2025-04-08T00:35:31.920Z (over 1 year ago)
- Topics: composition-api, google-3p, google-auth, google-authentication, google-identity-services, google-oauth2, google-sign-in, typescript, vue, vue-gsi, vue3, vue3-google-signin, vue3-gsi, vue3-typescript, vuejs
- Language: TypeScript
- Homepage: https://vue3-google-signin.wavezync.com/
- Size: 1.15 MB
- Stars: 171
- Watchers: 7
- Forks: 18
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue3 Google Sign-in
[](https://github.com/wavezync/vue3-google-signin/actions/workflows/build.yaml) [](https://www.npmjs.com/package/vue3-google-signin)    [](https://vue3-google-signin.wavezync.com/)
Use Google Identity Services with your Vue3 App easily
## Documentation
Full documentation can be accessed [here](https://vue3-google-signin.wavezync.com/)
## Installation
- With **NPM**
```bash
npm install -S vue3-google-signin
```
- With **Yarn**
```bash
yarn add vue3-google-signin
```
- With **PNPM**
```bash
pnpm add vue3-google-signin
```
## Setup the Library
Setting up the library is very simple. In your application entry point(`main.js` or `main.ts`)
put the following code.
```js
// rest of the code
import GoogleSignInPlugin from "vue3-google-signin"
app.use(GoogleSignInPlugin, {
clientId: 'CLIENT ID OBTAINED FROM GOOGLE API CONSOLE',
});
// other config
app.mount("#app");
```
## With Nuxt
To easily use the library with **Nuxt3** we have provided a module called [nuxt-vue3-google-signin](https://github.com/wavezync/nuxt-vue3-google-signin) which take care of proper component registration and plugin initialization :fire:.
### Add package
- With **NPM**
```bash
npm install -S nuxt-vue3-google-signin
```
- With **Yarn**
```bash
yarn add nuxt-vue3-google-signin
```
- With **PNPM**
```bash
pnpm add nuxt-vue3-google-signin
```
### Initialize
Now you can add following entry to the `nuxt.config.ts`(or `nuxt.config.js`)
```ts
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
modules: [
'nuxt-vue3-google-signin'
],
googleSignIn: {
clientId: 'CLIENT ID OBTAINED FROM GOOGLE API CONSOLE',
}
})
```
## Development
### Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
### Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
1. Disable the built-in TypeScript Extension
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
### Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
### Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```