{"id":27829,"date":"2022-06-09T08:01:28","date_gmt":"2022-06-09T08:01:28","guid":{"rendered":"http:\/\/create-in-video-ads-in-nuxt.js"},"modified":"2022-06-09T08:01:28","modified_gmt":"2022-06-09T08:01:28","slug":"create-in-video-ads-in-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-in-video-ads-in-nuxt-js\/","title":{"rendered":"Create In-Video Ads in NuxtJS"},"content":{"rendered":"

The popularity of video marketing stems from people\u2019s preference of video over text media. It\u2019s human nature: watching something enjoyable and easy to understand is more accessible than reading something.<\/p>\n

Using in-video advertising, anyone can get a competitive advantage over their market competitors.<\/p>\n

In this post, we\u2019ll learn how to create in-video ads in Nuxt.js using Cloudinary as our video hosting service.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a Code<\/a>S<\/a>andbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n \n

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

GitHub repository<\/h2>\n

https:\/\/github.com\/Olanetsoft\/in-video-ad-nuxtjs<\/a><\/p>\n

Getting started with Nuxt.js<\/h1>\n

Nuxt.js<\/a> is the bedrock of our Vue.js project, providing structure and flexibility while allowing us to scale with confidence.<\/p>\n

It is extensible, offering a robust module ecosystem and hooks engine that makes it simple to integrate our REST or GraphQL endpoints, favorite CMS, CSS frameworks, and other third-party applications.<\/p>\n

Project setup and installation<\/h1>\n

To create a new project, we will use the command below to scaffold a new project:<\/p>\n

    npx create-nuxt-app <project-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
A series of prompts will appear as a result of the command. Here are the defaults we recommend:<\/p>\n
\"Create<\/p>\n
The command creates a Nuxt.js project with TailwindCSS called video-ad-nuxtjs<\/code>.<\/p>\n
Next, we need to navigate into the project directory and start the development server using the command below.<\/p>\n
    cd <project<\/span> name<\/span>><\/span> && yarn dev\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Nuxt.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/code><\/p>\n
Configuring Cloudinary in Nuxt.js<\/h1>\n
We need to modify the nuxt.config.js<\/code> file by adding Cloudinary CDNs to the link<\/code> and script<\/code> sections, as shown below:<\/p>\n
    head: {\n        ...\n        htmlAttrs: {\n         ...\n        },\n        meta<\/span>: [\n          ...\n        ],\n        link<\/span>: [\n          { rel<\/span>: 'icon'<\/span>, type<\/span>: 'image\/x-icon'<\/span>, href<\/span>: '\/favicon.ico'<\/span> },\n          {\n            rel<\/span>: 'stylesheet'<\/span>,\n            href<\/span>: 'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.css'<\/span>,\n          },\n        ],\n        script<\/span>: [\n          {\n            src<\/span>: 'https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js'<\/span>,\n          },\n          {\n            src<\/span>: 'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.js'<\/span>,\n          },\n        ],\n      },\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Next, we need to include Cloudinary\u2019s cloud name as an environment variable. To do this, we need to create a .env<\/code> file in the root directory, and in this file, add the snippet below:<\/p>\n
    NUXT_ENV_CLOUDINARY_CLOUD_NAME=<YOUR<\/span> CLOUD<\/span> NAME<\/span> HERE<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Creating the in-video ads<\/h2>\n
We modify the index.vue<\/code> file in the pages folder to the following:<\/p>\n
https:\/\/gist.github.com\/Olanetsoft\/a91e57eb66e896a64480321bb434ca0b<\/a><\/p>\n
https:\/\/gist.github.com\/Olanetsoft\/a91e57eb66e896a64480321bb434ca0b<\/a><\/p>\n
The code snippet above did the following:<\/p>\n
TailwindCSS<\/a> is a CSS framework containing a lot of classes to help us customize our website\u2019s style.<\/p>\n