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 , and code can be found on github link here.
Folder Structure
src folder structure is as below.
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 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.
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.
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.
vue-infinity-loading
To implement the infinity scroll feature, we need to use nextPageToken field we got in the response of above apis.
Thank you
Top comments (0)