{"id":28092,"date":"2022-03-23T21:57:37","date_gmt":"2022-03-23T21:57:37","guid":{"rendered":"http:\/\/build-a-video-blog-in-nuxtjs"},"modified":"2022-03-23T21:57:37","modified_gmt":"2022-03-23T21:57:37","slug":"build-a-video-blog-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/","title":{"rendered":"Building a Video Blog"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Blogs are public websites or spaces to express thoughts through text, audio, pictures, or video. When a blog\u2019s content is primarily in video form, it is referred to as a video blog or sometimes a \u201cvlog\u201d.\nIn this article, you will learn how to build a video blog in Nuxtjs.<\/p>\n<p><a href=\"https:\/\/nuxtjs.org\/\">Nuxtjs<\/a> is a Vue framework that enables you to build server-rendered apps quickly. It comes with several handy features such as automatic file system routing, data fetching capabilities, and a rich ecosystem of modules.<\/p>\n<p>We\u2019ll use <a href=\"https:\/\/cloudinary.com\/documentation\/solution_overview\">Cloudinary<\/a>, a visual media platform to store and deliver the videos on the blog.<\/p>\n<h2>Sandbox &amp; GitHub Repo<\/h2>\n<p>Click the link below to view a complete demo of this article on CodeSandbox<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/nuxtjs-video-blog-mqi1c?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"nuxtjs-video-blog\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>To view the source code on GitHub, click <a href=\"https:\/\/github.com\/dpkreativ\/nuxtjs-video-blog\">here<\/a>.<\/p>\n<h2>Pre-requisites<\/h2>\n<p>To follow this article, you\u2019ll need the following:<\/p>\n<ul>\n<li>Knowledge of JavaScript and Vuejs.<\/li>\n<li>A Cloudinary account for your blog videos &#8211; Create a free one <a href=\"https:\/\/cloudinary.com\/console\">here<\/a>.<\/li>\n<li>\n<a href=\"https:\/\/classic.yarnpkg.com\/en\/docs\/install\">Yarn<\/a> package manager installed on your computer to handle the node packages used in this project. You\u2019ll need to install <a href=\"https:\/\/nodejs.org\/\">Nodejs<\/a> first, which comes with <a href=\"http:\/\/npmjs.org\/\">npm<\/a>.<\/li>\n<li>Knowing Nuxtjs isn\u2019t a strict requirement, but it\u2019ll be nice to have.<\/li>\n<\/ul>\n<h2>Getting started with Nuxtjs<\/h2>\n<p>In your terminal, navigate to the directory where you want to store your project and initialize it using the command <code>create-nuxt-app<\/code>:<\/p>\n<pre><code>npx create-nuxt-app nuxtjs-video-blog\n<\/code><\/pre>\n<p>Read, respond to the prompts and select your preferred options. However, ensure you select \u201cContent &#8211; Git-based headless CMS\u201d for <code>Nuxt.js modules<\/code>. Here\u2019s what a setup using \u201cTailwindCSS\u201d looks like:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1643903322657_Screenshot+from+2022-02-03+16-48-19.png\" alt=\"Nuxtjs setup for blogging\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1223\" height=\"434\"\/><\/p>\n<p><a href=\"https:\/\/content.nuxtjs.org\/\">Content &#8211; Git-based headless CMS<\/a> uses <code>@nuxt\/content<\/code> module to create content for your Nuxtjs blog.\nIt creates a <code>content\/<\/code> directory where you create blog posts in Markdown documents, and subsequently render the posts in HTML and Vue components.<\/p>\n<p>With the project\u2019s successful set up, move into the directory and open it with your preferred code editor. Here we use VS Code.<\/p>\n<pre><code>cd nuxt-video-blog &amp;&amp; code .\n<\/code><\/pre>\n<p>In the terminal, run <code>yarn dev<\/code> or <code>npm run dev<\/code> to start the a development server on <code>localhost:3000<\/code>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1643023413749_image.png\" alt=\"View result on the browser\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1366\" height=\"624\"\/><\/p>\n<h2>Setting up the blog<\/h2>\n<p>When you create a new Nuxt project with <code>@nuxt\/content<\/code>, you will find a <code>hello.md<\/code> file inside its <code>content\/<\/code> folder. Open it to view:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1643089893083_image.png\" alt=\"hello-world.md\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"987\" height=\"588\"\/><\/p>\n<p>The text in-between the triple-dashes (<code>---<\/code>) at the top of the file is called <a href=\"https:\/\/content.nuxtjs.org\/writing\/#front-matter\"><code>frontmatter<\/code><\/a>. It stores some data about your post. Below the frontmatter, you will see the blog\u2019s main content in Markdown format.\nIn your <code>content\/<\/code> directory, create a new Markdown file for your first blog post and name it <code>first-post.md<\/code>, then set up its frontmatter and content like this:<\/p>\n<pre><code>---\ntitle: My first video blog post\ndescription: 'A nice video for my first blog post'\npublishDate: 'Jan 25, 2022'\nauthor: 'Divine Orji'\ntags:\n  - Digital Marketing\n  - Social Media\n---\n## Hello\nWelcome to my first video blog post. Tap the video to view its content. Thanks!\n<\/code><\/pre>\n<p>Create as many markdown files as you want, and fill them with content. For this article, we will create two more files and delete <code>hello.md<\/code> leaving the <code>content\/<\/code> file directory like this:<\/p>\n<pre><code>\u251c\u2500\u2500 content\n|  \u251c\u2500\u2500 first-post.md\n|  \u251c\u2500\u2500 second-post.md\n|  \u2514\u2500\u2500 third-post.md\n<\/code><\/pre>\n<h2>Setting up Cloudinary<\/h2>\n<p>In your browser, head over to <a href=\"https:\/\/cloudinary.com\/console\">cloudinary.com\/console<\/a> and log in to access your Cloudinary dashboard.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1643089172409_image.png\" alt=\"Cloudinary Dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"938\" height=\"598\"\/><\/p>\n<p>Click on the \u201cMedia Library\u201d tab and create a new folder named <code>nuxtjs-video-blog<\/code>. Here, you would store all your blog\u2019s video content.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1644202522089_Screenshot+from+2022-02-07+03-54-56.png\" alt=\"Create new folder to store video content\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1002\" height=\"720\"\/><\/p>\n<p>Open your <code>nuxtjs-video-blog<\/code> folder on Cloudinary, and upload the videos you would like to use for your blog.\nHere are the videos used for this blog:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/res.cloudinary.com\/dpkreativ\/video\/upload\/v1644204126\/nuxtjs-video-blog\/first-post_pon18t.mp4\">First post<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/res.cloudinary.com\/dpkreativ\/video\/upload\/v1644204126\/nuxtjs-video-blog\/first-post_pon18t.mp4\">Second post<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/res.cloudinary.com\/dpkreativ\/video\/upload\/v1644204126\/nuxtjs-video-blog\/first-post_pon18t.mp4\">Third post<\/a>\n<\/li>\n<\/ul>\n<h2>Adding video content to the blog from Cloudinary<\/h2>\n<h3>Get video URL link from cloudinary<\/h3>\n<p>In your <code>nuxt-video-blog<\/code> folder on Cloudinary, hover over the video you want to add to your blog and click on the URL icon to copy its link:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1644204767452_Screenshot+from+2022-02-07+04-30-10.png\" alt=\"Get video URL\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1144\" height=\"643\"\/><\/p>\n<h3>Update frontmatter<\/h3>\n<p>In your code editor, open the <code>md<\/code> file of the blog post you want to add your video and update its frontmatter with a <code>video<\/code> property like this:<\/p>\n<pre><code>---\ntitle: My first video blog post\ndescription: 'A nice video for my first blog post'\nvideo: https:\/\/res.cloudinary.com\/dpkreativ\/video\/upload\/v1644204126\/nuxtjs-video-blog\/first-post_pon18t.mp4\npublishDate: 'Jan 25, 2022'\nauthor: 'Divine Orji'\ntags:\n  - Digital Marketing\n  - Social Media\n---\n<\/code><\/pre>\n<p>To serve your users an optimized version of the video content, tweak your <code>video<\/code> URL by adding <code>q_auto:eco\/<\/code> in-between <code>upload\/<\/code> and <code>v1643684496\/<\/code>. This tells Cloudinary to serve a video with its quality in economy mode.\nYour video parameter will now look like this:<\/p>\n<pre><code>https:\/\/res.cloudinary.com\/dpkreativ\/video\/upload\/q_auto:eco\/v1644204126\/nuxtjs-video-blog\/first-post_pon18t.mp4\n<\/code><\/pre>\n<h3>Add thumbnail to frontmatter<\/h3>\n<p>Update your blog post\u2019s frontmatter with a <code>thumbnail<\/code> to display a snapshot of the video as a preview. To do this is, copy the video URL and change <code>.mp4<\/code> to <code>.jpg<\/code> like this:<\/p>\n<pre><code>---\ntitle: My first video blog post\ndescription: 'A nice video for my first blog post'\nthumbnail: https:\/\/res.cloudinary.com\/dpkreativ\/video\/upload\/q_auto:eco\/v1644204126\/nuxtjs-video-blog\/first-post_pon18t.jpg\nvideo: https:\/\/res.cloudinary.com\/dpkreativ\/video\/upload\/q_auto:eco\/v1644204126\/nuxtjs-video-blog\/first-post_pon18t.mp4\npublishDate: 'Jan 25, 2022'\nauthor: 'Divine Orji'\ntags:\n  - Digital Marketing\n  - Social Media\n---\n<\/code><\/pre>\n<h2>Linking blog posts to homepage<\/h2>\n<h3>Fetch data using Nuxt\u2019s <code>asyncData<\/code><\/h3>\n<p>Using Nuxt\u2019s <a href=\"https:\/\/res.cloudinary.com\/dpkreativ\/video\/upload\/v1644204126\/nuxtjs-video-blog\/first-post_pon18t.mp4\">asyncData<\/a> hook, you can fetch and display data about your blog on your homepage.\nIn your code editor, navigate to <code>pages\/index.vue<\/code> and update <code>&lt;script&gt;<\/code> section with the code below:<\/p>\n<pre><code>&lt;script&gt;\nexport default {\n  name: 'IndexPage',\n  async asyncData({ $content }) {\n    const posts = await $content()\n      .only(['title', 'thumbnail', 'tags', 'slug'])\n      .sortBy('createdAt', 'desc')\n      .fetch()\n    console.log('posts', posts)\n    return {\n      posts,\n    }\n  },\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>Here, <code>asyncData<\/code> gets each post\u2019s <code>title<\/code>, <code>thumbnail<\/code>, <code>tags<\/code>, and <code>slug<\/code>, sorts the posts based on their creation time and returns the fetched data.<\/p>\n<p>On your browser, refresh the <code>localhost:3000<\/code> tab, and take a look at your console. You will see the data for all your blog posts:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1644208989723_Screenshot+from+2022-02-07+05-42-54.png\" alt=\"Data from blog post frontmatter\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"606\" height=\"444\"\/><\/p>\n<h3>Display data on homepage<\/h3>\n<p>Still in <code>pages\/index.vue<\/code>, update <code>&lt;template&gt;<\/code> with some markup to display the fetched data using the code below:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;main&gt;\n    &lt;section&gt;\n      &lt;h1 class=&quot;font-bold text-center text-5xl&quot;&gt;My Nuxt Video Blog&lt;\/h1&gt;\n    &lt;\/section&gt;\n    &lt;section v-for=&quot;post in posts&quot; :key=&quot;post.title&quot;&gt;\n      &lt;h2 class=&quot;font-semibold text-xl&quot;&gt;{{ post.title }}&lt;\/h2&gt;\n    &lt;\/section&gt;\n  &lt;\/main&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>In this code, <code>v-for=&quot;post in posts&quot;<\/code> will loop through your <code>posts<\/code> array, select each <code>post.title<\/code> and display it as an <code>h2<\/code> element. On your browser, <code>localhost:3000<\/code> will look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1643129992827_image.png\" alt=\"Display post titles on homepage\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1278\" height=\"377\"\/><\/p>\n<h3>Create component to preview blog posts<\/h3>\n<p>In your <code>components\/<\/code> directory, create a <code>PostPreview.vue<\/code> file, and paste in the code below:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div&gt;\n    &lt;a :href=&quot;`\/blog\/${post.slug}`&quot;&gt;\n      &lt;div class=&quot;w-full max-w-sm h-64 overflow-hidden rounded-lg&quot;&gt;\n        &lt;img\n          :src=&quot;post.thumbnail&quot;\n          alt=&quot;blogpost preview&quot;\n          class=&quot;object-cover w-full h-full&quot;\n        \/&gt;\n      &lt;\/div&gt;\n      &lt;ul v-if=&quot;post.tags&quot; class=&quot;flex space-x-3 mt-2&quot;&gt;\n        &lt;li v-for=&quot;tag in post.tags&quot; :key=&quot;tag&quot;&gt;{{ tag }}&lt;\/li&gt;\n      &lt;\/ul&gt;\n      &lt;h2 class=&quot;font-semibold text-xl mt-2&quot;&gt;{{ post.title }}&lt;\/h2&gt;\n    &lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\n  props: {\n    post: Object,\n  },\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>In this code:<\/p>\n<ul>\n<li>You created a <code>post<\/code> prop, and used it as a placeholder for the data you want to display in your PostPreview component.<\/li>\n<li>\n<code>&lt;a :href=``&quot;```\/blog\/${post.slug}<\/code>\u201c&gt;` will be used to create dynamic routes.<\/li>\n<\/ul>\n<p>In your <code>pages\/index.vue<\/code> file, update <code>&lt;template&gt;<\/code> with the PostPreview component:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;main&gt;\n    &lt;section class=&quot;py-5&quot;&gt;\n      &lt;h1 class=&quot;font-bold text-center text-5xl&quot;&gt;My Nuxt Video Blog&lt;\/h1&gt;\n    &lt;\/section&gt;\n    &lt;section class=&quot;p-5 grid gap-5 md:grid-cols-2 lg:grid-cols-3&quot;&gt;\n      &lt;PostPreview\n        v-for=&quot;post in posts&quot;\n        :key=&quot;post.slug&quot;\n        :post=&quot;post&quot;\n      &gt;&lt;\/PostPreview&gt;\n    &lt;\/section&gt;\n  &lt;\/main&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>In the code above, you used the <code>:post<\/code> prop to pass in each <code>post<\/code> object in your <code>posts<\/code> array. At this point, your blog\u2019s homepage should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1643686529873_image.png\" alt=\"PostPreview on homepage\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1359\" height=\"629\"\/><\/p>\n<h3>Create dynamic post routes<\/h3>\n<p>Right now, when you click on any of your post previews, it will display a 404 page. To fix that, create a page that will dynamically display the contents of each blog post based on its route. In <code>pages\/<\/code>, create a <code>blog\/<\/code> folder with a <code>_slug.vue<\/code> file and add the following content to the file:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;h1&gt;{{ post.title }}&lt;\/h1&gt;\n&lt;\/template&gt;\n&lt;script&gt;\nexport default {\n  async asyncData({ $content, params }) {\n    const post = await $content(params.slug).fetch()\n    return { post }\n  },\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>In this code:<\/p>\n<ul>\n<li>\n<code>asyncData<\/code> fetches the <code>$content<\/code> of a blog post based on the parameters specified in the URL and returns it as a <code>post<\/code> object.<\/li>\n<li>\n<code>&lt;h1&gt;{{ post.title }}&lt;\/h1&gt;<\/code> shows the post\u2019s title on the page.<\/li>\n<\/ul>\n<p>Now when you click a post preview link, it will display this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1643627124153_image.png\" alt=\"Dynamic route for third post\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"779\" height=\"328\"\/><\/p>\n<h2>Setting up page layout<\/h2>\n<p>Right now, your blog looks unpolished. You can use <a href=\"https:\/\/nuxtjs.org\/docs\/directory-structure\/layouts\/\">Nuxt Layouts<\/a> feature to set up its layout. In your project\u2019s root directory, create a <code>layouts\/<\/code> folder and add a <code>default.vue<\/code> file to it with the following code:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div class=&quot;w-screen min-h-screen&quot;&gt;\n    &lt;div class=&quot;w-full max-w-6xl mx-auto&quot;&gt;\n      &lt;Nuxt \/&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>Restart your server in your terminal for this layout to take effect.<\/p>\n<h2>Setting up the page for each blog post<\/h2>\n<p>In <code>blog\/_slug.vue<\/code>, update <code>&lt;template&gt;<\/code> with more content from your blog post:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div class=&quot;py-20&quot;&gt;\n    &lt;section class=&quot;px-5&quot;&gt;\n      &lt;NuxtLink to=&quot;\/&quot; href=&quot;\/&quot; class=&quot;py-2 text-gray-500 flex items-center&quot;&gt;\n        &lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot;&gt;\n          &lt;path\n            d=&quot;M5.83 11L8.41 8.41L7 7L2 12L7 17L8.41 15.59L5.83 13H22V11H5.83Z&quot;\n            fill=&quot;currentColor&quot;\n          \/&gt;\n        &lt;\/svg&gt;\n        &lt;div class=&quot;ml-1&quot;&gt;Go back&lt;\/div&gt;\n      &lt;\/NuxtLink&gt;\n      &lt;div class=&quot;mt-5&quot;&gt;\n        &lt;video controls class=&quot;w-full&quot; preload=&quot;metadata&quot;&gt;\n          &lt;source :src=&quot;post.video&quot; type=&quot;video\/mp4&quot; \/&gt;\n          &lt;p&gt;Your browser doesn't support HTML5 video.&lt;\/p&gt;\n        &lt;\/video&gt;\n      &lt;\/div&gt;\n      &lt;h1 class=&quot;mt-5 font-bold text-3xl&quot;&gt;{{ post.title }}&lt;\/h1&gt;\n      &lt;ul v-if=&quot;post.tags&quot; class=&quot;flex space-x-3 mt-2&quot;&gt;\n        &lt;li\n          v-for=&quot;tag in post.tags&quot;\n          :key=&quot;tag&quot;\n          class=&quot;px-2 py-1 bg-green-400 text-white text-xs&quot;\n        &gt;\n          {{ tag }}\n        &lt;\/li&gt;\n      &lt;\/ul&gt;\n      &lt;p class=&quot;text-gray-500 mt-2 text-sm&quot;&gt;{{ post.description }}&lt;\/p&gt;\n      &lt;p class=&quot;mt-2 text-gray-500&quot;&gt;{{ post.publishDate }}&lt;\/p&gt;\n      &lt;h2 class=&quot;mt-2 font-semibold&quot;&gt;{{ post.author }}&lt;\/h2&gt;\n    &lt;\/section&gt;\n    &lt;section class=&quot;my-5 px-5&quot;&gt;\n      &lt;nuxt-content :document=&quot;post&quot; \/&gt;\n    &lt;\/section&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>In the code above:<\/p>\n<ul>\n<li>You used HTML elements with TailwindCSS classes to set up how a browser will display the blog\u2019s content.<\/li>\n<li>\n<code>&lt;NuxtLink&gt;<\/code> is a <a href=\"https:\/\/nuxtjs.org\/docs\/directory-structure\/layouts\/\">built-in component<\/a> in Nuxtjs that enables you to navigate between pages in your app.<\/li>\n<li>\n<code>&lt;video&gt;<\/code> is an element in HTML5 that enables you to embed videos from different sources using a URL. It contains the <code>&lt;source&gt;<\/code> element with <code>:src=&quot;post.video&quot;<\/code> &#8211; the video URL in the frontmatter.<\/li>\n<li>\n<code>&lt;nuxt-content&gt;<\/code> is used to display the markdown content of your blog post.<\/li>\n<\/ul>\n<p>Your blog post page will look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_2CB2110A1D217E74EE41225DE5E27911A71686058EE2334B5EAE5A1B7921D11D_1643907530992_Screenshot+from+2022-02-03+17-58-20.png\" alt=\"Blog post\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1266\" height=\"914\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, you learned how to create a video blog in Nuxtjs with content from Cloudinary.\nYou can take this further by learning how to improve your blog\u2019s SEO using metadata or even build a complete website around your blog.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>Nuxt &#8211; Create a blog with Nuxt Content<\/li>\n<li>Building your own blog with Nuxt Content and TailwindCSS<\/li>\n<li>\n<code>&lt;video&gt;<\/code>: The Video Embed element &#8211; HTML: HyperText Markup Language | MDN<\/li>\n<li>An analysis of video blogs<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28093,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,372,371,303],"class_list":["post-28092","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-nuxtjs","tag-under-review","tag-video"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Building a Video Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Video Blog\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T21:57:37+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Building a Video Blog\",\"datePublished\":\"2022-03-23T21:57:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/\"},\"wordCount\":4,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"NuxtJS\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/\",\"name\":\"Building a Video Blog\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA\",\"datePublished\":\"2022-03-23T21:57:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA\",\"width\":6000,\"height\":4000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Video Blog\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a Video Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Building a Video Blog","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T21:57:37+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Building a Video Blog","datePublished":"2022-03-23T21:57:37+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/"},"wordCount":4,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA","keywords":["Guest Post","NuxtJS","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/","name":"Building a Video Blog","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA","datePublished":"2022-03-23T21:57:37+00:00","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA","width":6000,"height":4000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-a-video-blog-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a Video Blog"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925418\/Web_Assets\/blog\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c\/a8791247269e110af457bf8655f18069d0bcc69a-6000x4000-1_2809385b5c.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28092"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28092\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28093"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}