Using youtube v3 APIs to list and search channel videos and use vue-infinite-loading
Tags: vue, youtube, webdev, vueinfiniteloading
Published: 2022-07-12 22:35:03

In this post we are going to see an example of using  PeachScript/vue-infinite-loading and youtube v3 APIs  to infinitely load and search youtube videos of a channel.

Demo of this example can be seen [here](https://youtubev3example.netlify.app/)  , and code can be found on [github link here](https://github.com/manojkmishra/youtubev3api-eg).

**Folder Structure**

src folder structure is as below.
![src folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74g1gxgt0ost1xn9nmm1.png)

**Files**

This is a single page application(SPA) having two main components/pages - Home page, About page(for search).
External dependencies used in this app are- axios ( for accessing youtube apis), moment ( formatting date/time) and vue-infinite-loading (for infinite scroll feature).

Home.vue- main file which loads when this SPA is opened on browser	
VideoGridItem.vue- component used to show single video grid on home/search page	
About.vue- Component used for searching videos	
SearchResults.vue- Component where Home/About pages forward all the video results. It loops through them to show each of them on VideoGridItem.vue.
SearchForm.vue- search bar 	
Header.vue- top bar	
api.config.js- points to youtube api key saved in .env file	
env file- has VUE_APP_YOUTUBE_API_KEY=yourkey

**Find channelId of a youtube channel**

To get the videos of a channel first we need to find the channelId using youtube channel name(Here we are using TraversyMedia channel).

![Find_channelId](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fx432n6jgfvwxaok3gax.png)
![Find_channelId_result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oydb4y3hp9d45lbk7njg.png)

**Find playlistId using channelId**

Now to get playlistId, please replace C with U in channelId (UCxxxxxxxx => UUxxxxxxxx), and use it in below api to get the channel videos.

![get_channel_videos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ld7slsl6ikeaj95tzqb.png)

![get_channel_videos_result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv0rcq3qx03ulr2qs5is.png)

**Search videos of this channel**

All above snippets are from Home.vue. For searching videos of this channel we are using About.vue. Youtube has different API for searching the videos.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5coijq18flnjp2eepco.JPG)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3giwu2kb80z4y2y7a2bv.JPG)

**Find view count of a video**

We need to use below API to find the view count of a video. We are using videoId from the output of above APIs inside this API.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9p2o12p5485orw9eo9k.JPG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff00s1zlx54j4gfolf0j.JPG)



**vue-infinity-loading**

To implement the infinity scroll feature, we need to use nextPageToken field we got in the response of above apis.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gb5mntjshudtcxps8x6e.JPG)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsjxqpmrqbckh068t94t.JPG)

Thank you