{"id":27997,"date":"2023-09-08T07:00:00","date_gmt":"2023-09-08T14:00:00","guid":{"rendered":"http:\/\/Displaying-video-recommendations-in-Nuxtjs"},"modified":"2025-11-27T12:14:53","modified_gmt":"2025-11-27T20:14:53","slug":"displaying-video-recommendations-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/displaying-video-recommendations-in-nuxtjs","title":{"rendered":"Displaying Video Recommendations in NuxtJS"},"content":{"rendered":"

For video-intensive applications, recommendations are a standard feature. We see recommendations seamlessly function in video apps such as Netflix and YouTube. In this article, we\u2019ll learn how we can add them to our custom applications.<\/p>\n

Codesandbox<\/h2>\n

The final project can be viewed on Codesandbox<\/a>.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

You can find the full source code on my Github<\/a> repository.<\/p>\n

Nuxt.Js App Setup<\/h2>\n

The first step is to create the scaffold of our app. We\u2019ll use Nuxt.Js<\/a>, a popular Vue.Js<\/a> framework. It boasts of being performant while giving developers an enjoyable user experience.<\/p>\n

We\u2019ll use the create-nuxt-app<\/a> utility. Ensure you have yarn or npm v5.2+\/v6.1+ installed. Open the terminal in your preferred working directory:<\/p>\n

\nyarn create nuxt-app nuxtjs-video-recommendations\n\n# OR<\/span>\n\nnpx create-nuxt-app nuxtjs-video-recommendations\n\n# OR<\/span>\n\nnpm init nuxt-app nuxtjs-video-recommendations\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The above command will trigger a set of setup questions. Here are our recommended defaults:<\/p>\n
\n
Project name: nuxtjs-video-recommendations<\/p>\n<\/blockquote>\n
\n
Programming language: JavaScript<\/p>\n<\/blockquote>\n
\n
Package manager: Yarn<\/p>\n<\/blockquote>\n
\n
UI framework: Tailwind CSS<\/p>\n<\/blockquote>\n
\n
Nuxt.js modules: N\/A<\/p>\n<\/blockquote>\n
\n
Linting tools: N\/A<\/p>\n<\/blockquote>\n
\n
Testing framework: None<\/p>\n<\/blockquote>\n
\n
Rendering mode: Universal (SSR\/SSG)<\/p>\n<\/blockquote>\n
\n
Deployment target: Server (Node.js hosting)<\/p>\n<\/blockquote>\n
\n
Development tools: N\/A<\/p>\n<\/blockquote>\n
Once the setup is complete, you may enter and run your project:<\/p>\n
\ncd nuxtjs-vidoe-recommendations\n\n  \n\nyarn dev\n\n# OR<\/span>\n\nnpm run dev\n\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The app should now be running on https:\/\/localhost:3000<\/a>.<\/p>\n
Video Setup<\/h2>\n
Before we start building, we need to ensure we have the videos we need. We\u2019ll store our videos on Cloudinary<\/a>, a media management platform with a powerful set of APIs and SDKs. Storing them on Cloudinary will reduce or app size, hosting costs while delivering the files via a content delivery network (CDN), thus reducing load time. If you don\u2019t have an account, create one here<\/a>.<\/p>\n
Proceed to the media library<\/a> and create a folder called nuxtjs-video-recommendations<\/code>. Within the folder, add the following videos:<\/p>\n