Repository files navigation

Use Google Identity Services with your Vue3 App easily

Full documentation can be accessedhere

• WithNPM

npm install -S vue3-google-signin

• WithYarn

yarn add vue3-google-signin

• WithPNPM

pnpm add vue3-google-signin

Setting up the library is very simple. In your application entry point(main.js ormain.ts)put the following code.

// rest of the codeimportGoogleSignInPluginfrom"vue3-google-signin"app.use(GoogleSignInPlugin,{clientId:'CLIENT ID OBTAINED FROM GOOGLE API CONSOLE',});// other configapp.mount("#app");

To easily use the library withNuxt3 we have provided a module callednuxt-vue3-google-signin which take care of proper component registration and plugin initialization 🔥.

• WithNPM

npm install -S nuxt-vue3-google-signin

• WithYarn

yarn add nuxt-vue3-google-signin

• WithPNPM

pnpm add nuxt-vue3-google-signin

Now you can add following entry to thenuxt.config.ts(ornuxt.config.js)

import{defineNuxtConfig}from'nuxt/config'exportdefaultdefineNuxtConfig({modules:['nuxt-vue3-google-signin'],googleSignIn:{clientId:'CLIENT ID OBTAINED FROM GOOGLE API CONSOLE',}})

VSCode +Volar (and disable Vetur) +TypeScript Vue Plugin (Volar).

TypeScript cannot handle type information for.vue imports by default, so we replace thetsc CLI withvue-tsc for type checking. In editors, we needTypeScript Vue Plugin (Volar) 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 aTake Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. RunExtensions: Show Built-in Extensions from VSCode's command palette
   2. FindTypeScript and JavaScript Language Features, right click and selectDisable (Workspace)
2. Reload the VSCode window by runningDeveloper: Reload Window from the command palette.

SeeVite Configuration Reference.

npm install

npm run dev

npm run build

npm run lint