vue3-googleapis
A simple and easy to use wrapper plugin for adding the Google API JavaScript client to your Vue3 application. This plugin is an upgrade to https://www.npmjs.com/package/vue-googleapis
About
This plugin is basically a wrapper around Google's API JavaScript Client.
Installation
npm install --save vue3-googleapisInitialization
- Import the plugin in
main.js
import gapiPlugin from 'vue3-googleapis'- Then do:
app.use(gapiPlugin, {
apiKey: '<GOOGLE_PROJECT_API_KEY>',
clientId: '<CLIENT_ID>.apps.googleusercontent.com',
discoveryDocs: ['https://mybusinessbusinessinformation.googleapis.com/$discovery/rest?version=v1'],
scope: 'https://www.googleapis.com/auth/business.manage email'
})Hints
Scope
- To use a single scope you can do:
scope: 'https://www.googleapis.com/auth/business.manage'API Discovery Docs
- Using the docs makes using this JavaScript client simple. Here is an example that uses the mybusinessbusinessinformation API discovery document for creating a new business location:
- Under the resources key:
{
"resources": {
"categories": {
"methods": {
"list": {},
"create": {
"parameters": {
"parent": {
"description": "Required. The name of the account in which to create this location.",
"type": "string",
"pattern": "^accounts/[^/]+$",
"location": "path",
"required": true
}
},
"request" {
"$ref": "Location"
}
}
}
}
}
}
- Expand the method, to find what parameters are supported as shown above.
-
parentis a required parameter. -
The
requestbody should contain a location object -
With this in mind, here is how you can create a Google business location using the client:
const location = {
language_code: "en",
title: "Joe's Burgers",
categories: {
primaryCategory: {
name: "categories/gcid:fast_food_restaurant",
displayName: "Fast food restaurant",
},
},
storefront_address: {
regionCode: "GY",
languageCode: "en",
locality: "Georgetown",
addressLines: ["123 Stanley drive"],
},
website_uri: "https://www.joesburger.com",
},
async handleCreateLocation(e) {
e.preventDefault();
const response =
await this.$google.api.client.mybusinessbusinessinformation.accounts.locations.create(
{
parent: `accounts/${userId}`,
resource: location,
}
);
console.log(response);
},- Feel free to browse the code in https://github.com/codedbychavez/vue3-googleapis-sample for example usages in a vue3 application.
