Building a Video Blog

Divine Orji

Blogs are public websites or spaces to express thoughts through text, audio, pictures, or video. When a blog’s content is primarily in video form, it is referred to as a video blog or sometimes a “vlog”. In this article, you will learn how to build a video blog in Nuxtjs.

Nuxtjs 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.

We’ll use Cloudinary, a visual media platform to store and deliver the videos on the blog.

Sandbox & GitHub Repo

Click the link below to view a complete demo of this article on CodeSandbox

To view the source code on GitHub, click here.

Pre-requisites

To follow this article, you’ll need the following:

  • Knowledge of JavaScript and Vuejs.
  • A Cloudinary account for your blog videos - Create a free one here.
  • Yarn package manager installed on your computer to handle the node packages used in this project. You’ll need to install Nodejs first, which comes with npm.
  • Knowing Nuxtjs isn’t a strict requirement, but it’ll be nice to have.

Getting started with Nuxtjs

In your terminal, navigate to the directory where you want to store your project and initialize it using the command create-nuxt-app:

1npx create-nuxt-app nuxtjs-video-blog

Read, respond to the prompts and select your preferred options. However, ensure you select “Content - Git-based headless CMS” for Nuxt.js modules. Here’s what a setup using “TailwindCSS” looks like:

Content - Git-based headless CMS uses @nuxt/content module to create content for your Nuxtjs blog. It creates a content/ directory where you create blog posts in Markdown documents, and subsequently render the posts in HTML and Vue components.

With the project’s successful set up, move into the directory and open it with your preferred code editor. Here we use VS Code.

1cd nuxt-video-blog && code .

In the terminal, run yarn dev or npm run dev to start the a development server on localhost:3000.

Setting up the blog

When you create a new Nuxt project with @nuxt/content, you will find a hello.md file inside its content/ folder. Open it to view:

The text in-between the triple-dashes (---) at the top of the file is called frontmatter. It stores some data about your post. Below the frontmatter, you will see the blog's main content in Markdown format. In your content/ directory, create a new Markdown file for your first blog post and name it first-post.md, then set up its frontmatter and content like this:

1---
2title: My first video blog post
3description: 'A nice video for my first blog post'
4publishDate: 'Jan 25, 2022'
5author: 'Divine Orji'
6tags:
7 - Digital Marketing
8 - Social Media
9---
10## Hello
11Welcome to my first video blog post. Tap the video to view its content. Thanks!

Create as many markdown files as you want, and fill them with content. For this article, we will create two more files and delete hello.md leaving the content/ file directory like this:

1├── content
2| ├── first-post.md
3| ├── second-post.md
4| └── third-post.md

Setting up Cloudinary

In your browser, head over to cloudinary.com/console and log in to access your Cloudinary dashboard.

Click on the “Media Library” tab and create a new folder named nuxtjs-video-blog. Here, you would store all your blog’s video content.

Open your nuxtjs-video-blog folder on Cloudinary, and upload the videos you would like to use for your blog. Here are the videos used for this blog:

Adding video content to the blog from Cloudinary

Get video URL link from cloudinary

In your nuxt-video-blog folder on Cloudinary, hover over the video you want to add to your blog and click on the URL icon to copy its link:

Update frontmatter

In your code editor, open the md file of the blog post you want to add your video and update its frontmatter with a video property like this:

1---
2title: My first video blog post
3description: 'A nice video for my first blog post'
4video: https://res.cloudinary.com/dpkreativ/video/upload/v1644204126/nuxtjs-video-blog/first-post_pon18t.mp4
5publishDate: 'Jan 25, 2022'
6author: 'Divine Orji'
7tags:
8 - Digital Marketing
9 - Social Media
10---

To serve your users an optimized version of the video content, tweak your video URL by adding q_auto:eco/ in-between upload/ and v1643684496/. This tells Cloudinary to serve a video with its quality in economy mode. Your video parameter will now look like this:

1https://res.cloudinary.com/dpkreativ/video/upload/q_auto:eco/v1644204126/nuxtjs-video-blog/first-post_pon18t.mp4

Add thumbnail to frontmatter

Update your blog post's frontmatter with a thumbnail to display a snapshot of the video as a preview. To do this is, copy the video URL and change .mp4 to .jpg like this:

1---
2title: My first video blog post
3description: 'A nice video for my first blog post'
4thumbnail: https://res.cloudinary.com/dpkreativ/video/upload/q_auto:eco/v1644204126/nuxtjs-video-blog/first-post_pon18t.jpg
5video: https://res.cloudinary.com/dpkreativ/video/upload/q_auto:eco/v1644204126/nuxtjs-video-blog/first-post_pon18t.mp4
6publishDate: 'Jan 25, 2022'
7author: 'Divine Orji'
8tags:
9 - Digital Marketing
10 - Social Media
11---

Linking blog posts to homepage

Fetch data using Nuxt’s asyncData

Using Nuxt’s asyncData hook, you can fetch and display data about your blog on your homepage. In your code editor, navigate to pages/index.vue and update <script> section with the code below:

1<script>
2export default {
3 name: 'IndexPage',
4 async asyncData({ $content }) {
5 const posts = await $content()
6 .only(['title', 'thumbnail', 'tags', 'slug'])
7 .sortBy('createdAt', 'desc')
8 .fetch()
9 console.log('posts', posts)
10 return {
11 posts,
12 }
13 },
14}
15</script>

Here, asyncData gets each post’s title, thumbnail, tags, and slug, sorts the posts based on their creation time and returns the fetched data.

On your browser, refresh the localhost:3000 tab, and take a look at your console. You will see the data for all your blog posts:

Display data on homepage

Still in pages/index.vue, update <template> with some markup to display the fetched data using the code below:

1<template>
2 <main>
3 <section>
4 <h1 class="font-bold text-center text-5xl">My Nuxt Video Blog</h1>
5 </section>
6 <section v-for="post in posts" :key="post.title">
7 <h2 class="font-semibold text-xl">{{ post.title }}</h2>
8 </section>
9 </main>
10</template>

In this code, v-for="post in posts" will loop through your posts array, select each post.title and display it as an h2 element. On your browser, localhost:3000 will look like this:

Create component to preview blog posts

In your components/ directory, create a PostPreview.vue file, and paste in the code below:

1<template>
2 <div>
3 <a :href="`/blog/${post.slug}`">
4 <div class="w-full max-w-sm h-64 overflow-hidden rounded-lg">
5 <img
6 :src="post.thumbnail"
7 alt="blogpost preview"
8 class="object-cover w-full h-full"
9 />
10 </div>
11 <ul v-if="post.tags" class="flex space-x-3 mt-2">
12 <li v-for="tag in post.tags" :key="tag">{{ tag }}</li>
13 </ul>
14 <h2 class="font-semibold text-xl mt-2">{{ post.title }}</h2>
15 </a>
16 </div>
17</template>
18<script>
19export default {
20 props: {
21 post: Object,
22 },
23}
24</script>

In this code:

  • You created a post prop, and used it as a placeholder for the data you want to display in your PostPreview component.
  • <a :href=``"```/blog/${post.slug}">` will be used to create dynamic routes.

In your pages/index.vue file, update <template> with the PostPreview component:

1<template>
2 <main>
3 <section class="py-5">
4 <h1 class="font-bold text-center text-5xl">My Nuxt Video Blog</h1>
5 </section>
6 <section class="p-5 grid gap-5 md:grid-cols-2 lg:grid-cols-3">
7 <PostPreview
8 v-for="post in posts"
9 :key="post.slug"
10 :post="post"
11 ></PostPreview>
12 </section>
13 </main>
14</template>

In the code above, you used the :post prop to pass in each post object in your posts array. At this point, your blog’s homepage should look like this:

Create dynamic post routes

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 pages/, create a blog/ folder with a _slug.vue file and add the following content to the file:

1<template>
2 <h1>{{ post.title }}</h1>
3</template>
4<script>
5export default {
6 async asyncData({ $content, params }) {
7 const post = await $content(params.slug).fetch()
8 return { post }
9 },
10}
11</script>

In this code:

  • asyncData fetches the $content of a blog post based on the parameters specified in the URL and returns it as a post object.
  • <h1>{{ post.title }}</h1> shows the post's title on the page.

Now when you click a post preview link, it will display this:

Setting up page layout

Right now, your blog looks unpolished. You can use Nuxt Layouts feature to set up its layout. In your project’s root directory, create a layouts/ folder and add a default.vue file to it with the following code:

1<template>
2 <div class="w-screen min-h-screen">
3 <div class="w-full max-w-6xl mx-auto">
4 <Nuxt />
5 </div>
6 </div>
7</template>

Restart your server in your terminal for this layout to take effect.

Setting up the page for each blog post

In blog/_slug.vue, update <template> with more content from your blog post:

1<template>
2 <div class="py-20">
3 <section class="px-5">
4 <NuxtLink to="/" href="/" class="py-2 text-gray-500 flex items-center">
5 <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
6 <path
7 d="M5.83 11L8.41 8.41L7 7L2 12L7 17L8.41 15.59L5.83 13H22V11H5.83Z"
8 fill="currentColor"
9 />
10 </svg>
11 <div class="ml-1">Go back</div>
12 </NuxtLink>
13 <div class="mt-5">
14 <video controls class="w-full" preload="metadata">
15 <source :src="post.video" type="video/mp4" />
16 <p>Your browser doesn't support HTML5 video.</p>
17 </video>
18 </div>
19 <h1 class="mt-5 font-bold text-3xl">{{ post.title }}</h1>
20 <ul v-if="post.tags" class="flex space-x-3 mt-2">
21 <li
22 v-for="tag in post.tags"
23 :key="tag"
24 class="px-2 py-1 bg-green-400 text-white text-xs"
25 >
26 {{ tag }}
27 </li>
28 </ul>
29 <p class="text-gray-500 mt-2 text-sm">{{ post.description }}</p>
30 <p class="mt-2 text-gray-500">{{ post.publishDate }}</p>
31 <h2 class="mt-2 font-semibold">{{ post.author }}</h2>
32 </section>
33 <section class="my-5 px-5">
34 <nuxt-content :document="post" />
35 </section>
36 </div>
37</template>

In the code above:

  • You used HTML elements with TailwindCSS classes to set up how a browser will display the blog’s content.
  • <NuxtLink> is a built-in component in Nuxtjs that enables you to navigate between pages in your app.
  • <video> is an element in HTML5 that enables you to embed videos from different sources using a URL. It contains the <source> element with :src="post.video" - the video URL in the frontmatter.
  • <nuxt-content> is used to display the markdown content of your blog post.

Your blog post page will look like this:

Conclusion

In this article, you learned how to create a video blog in Nuxtjs with content from Cloudinary. You can take this further by learning how to improve your blog’s SEO using metadata or even build a complete website around your blog.

Resources

  • Nuxt - Create a blog with Nuxt Content
  • Building your own blog with Nuxt Content and TailwindCSS
  • <video>: The Video Embed element - HTML: HyperText Markup Language | MDN
  • An analysis of video blogs

Divine Orji

Software Engineer and Technical Writer

I am a software engineer passionate about building fast, scalable apps with beautiful user interfaces.