How to integrate Google Calendar?

Hey everyone!
I’ve just started to create my Vue app but have a little trouble integrating a Google Calendar.
What I want to do is adding the following: Google Calendar API
After a user is logged in (google oauth) I want to show the upcoming events.

Here is just a very simple example of the events that are showing after following the quickstart:

Is this even possible with vue? And if so, is there anyone who has some links to examples? Or can give me some info on how to start?

Thanks in advance!


Created a simple example for you. I used syntax highlighting for response json - therefore if you want to properly iterate the items use a v-for directive.

P.S. The proper way would be to use Vuex store for Google API auth handling.

Be sure to replace:


And add domain exceptions for your API setup:


Thank you so much @andris.vilde
I used your example in my current project and it worked!

1 Like

Glad to hear it :slight_smile:

andris i have a question.

I’ve created credentials in my account in google but your demo says authorization fails. I dont know what i have to put in Authorized JavaScript origins.

Could you give me a hand? i need to implement add event to google calendar in my project in vuejs

It fails because I have removed my own keys. Please read my original post carefully.

I have created my keys in google and i have replaced where yo said, but i didnt worked because a url redirect mismatch.

And one thing more. I tryed to replicate your code in my project but in created method whe you do this.api = gapi fails because gapi is not defined. Where did you define gapi?


Check the resources used on the left side in my JSFiddle.

It’s google API code:

Yes i could signIn but i have another problem. The api does not have in the object the property calendar and so that it does not have events so I cant list or create an event. Do you know how can i solve it?

I think you should create your own thread with your issue with all the details (code, template e.c.). Hijacking a solved thread is not appropriate.

the example as such fails as indicated in the last incident explained


I am new in VueJs and I am using laravel with vuejs. I want to integrate Google Calender for all my clients .

Is there any google calender api for Vue?

You can use

Someone was talking about hijacking the thread. I have to disagree about that. There is clearly an issue related to topic. Experiencing the same. The one who made the jsfiddle probably didn’t do this in a vue-cli environment and therefore does not experience the issue we are talking about. Have tried to load the api.js library as cdn in index.html as well as tried to load it as a const with require() directly into vue-component without success. Command: “this.api = gapi” does not work. It binds to the wrong library or doesn’t get full functionality from it. My guess at first glance is that “gapi” is already set by some other instance but haven’t got the time to test it yet. Has anyone been able to solve this?

How did you solve the problem in the end?
Because I too have the same problem…