vue3-google-signin

Vue3 Google Sign-in

Use Google Identity Services with your Vue3 App easily

Documentation

Full documentation can be accessed here

Installation

• With NPM

npm install -S vue3-google-signin

• With Yarn

yarn add vue3-google-signin

• With PNPM

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.

// 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 which take care of proper component registration and plugin initialization :fire:.

Add package

• With NPM

npm install -S nuxt-vue3-google-signin

• With Yarn

yarn add nuxt-vue3-google-signin

• With PNPM

pnpm add nuxt-vue3-google-signin

Initialize

Now you can add following entry to the nuxt.config.ts(or nuxt.config.js)

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  modules: ["nuxt-vue3-google-signin"],
  googleSignIn: {
    clientId: "CLIENT ID OBTAINED FROM GOOGLE API CONSOLE",
  },
});

Development

Requires Node.js 22+ and pnpm. Recommended IDE: VSCode + Vue - Official.

pnpm install
cp .env.example .env   # set VITE_GOOGLE_CLIENT_ID for the dev playground
pnpm dev               # playground (src/App.vue)
pnpm docs:dev          # docs site
pnpm lint
pnpm build             # type-check + library build
pnpm test              # build, then E2E tests (Playwright uses your installed Chrome)