Get Started

Prerequisite

This project uses Google Identity Services Library under the hood. Its just bunch of helpers which allows you to develop Vue3 apps with google login 🚀

You need to configure a project in Google API Console and obtain a Client ID using the following 📝 guide from google.

TIP

💡 Make sure to properly configure Redirects and JavaScript Origins in the Cloud Console.

To PopUps work, you may need to add same URL to both Redirects and JavaScript Origins.

INFO

If you want to use the library with Nuxt jump to following section

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");

Now the library is ready to be used ✨

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 🔥.

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',
  }
})