At work recently I created a youtube gallery widget using a mixture of jQuery and HandlebarJS. I decide to rebuild my Gallery widget but using VueJs framework something I’ve not used before.

Applying for a Youtube Api Key

Before we start it’s important that you have a Google Account to access Google Developer Console. It’s free and straight forward to setup.

Sign into Developer Console. Click on create a project at the time of writing this tutorial it’s in a dropdown on the top right section of the page. Give your project a name and click on create

Now from within your project click on Enable and manage Apis. Now choose and enable YouTube Data API v3. Now that it is enabled Go to Credentials.

On the option “Which API are you using?” choose YouTube Data API v3 and on the option “Where will you be calling the API from?” and choose Web browser (Javascript).

Once that this has been selected. We now create our credentials click on Credentials in the left nav. Now click on Create credentials and select Api Key. Once this is selected now click on “Browser Key” from the modal lightbox.

On the next screen name your key and press create. Your Api key should be returned you in a modal box. Take a note of this number.

HTML Markup

For ease of use i’m going to put all markup on single html file. In production I would usally seperate the HTML, Javascript and the CSS.

We now create the fetchVideoList method. What this method does is fetch the youtube playlist informaiton as a json feed. We are going to need a couple of things the playlistID, the Api key which we got earlier and finally how many videos you wish to fetch.

The final piece of Vuejs snippet we need is to fire a new Vue instance in this example I placing the vue on the body

new Vue({
el: 'body'
});

Back to the HTML, we no longer need our previous ul so replace it with the code below. What the code below does is first we add a gallery directive. This is where the YouTube will be place on the page. Doing it as directive I find is the best approach as it allows the code to be reusable.

The gallery directive refers to the videos-template which is a list which loops through each video and prints title, Video url and Image Thumbnail