Javascript is required
·
3 min read
·
5691 views

Create a Blog With Nuxt Content v2

Create a Blog With Nuxt Content v2 Image

I prefer simple Markdown files as the content source for my blog posts. In this article, I want to show you how can set up a simple blog using Nuxt Content v2.

Nuxt Content v2

Nuxt Content v2 is a Nuxt 3 module that reads local files from the /content directory in your project. It supports .md, .yml, .csv and .json files. Additionally, it's possible to use Vue components in Markdown with the MDC Syntax.

Setup Nuxt App

First, let's start a new Nuxt Content project with:

bash
npx nuxi init nuxt-demo-blog -t content

Then we need to install the dependencies in the nuxt-demo-blog folder:

bash
yarn install

Now we can start the Nuxt content app in development mode:

bash
yarn dev

A browser window should automatically open for http://localhost:3000. Alternatively, you can start playing with Nuxt Content in your browser using StackBlitz or CodeSandbox.

The following StackBlitz sandbox demonstrates the simple blog application we create in this article:

Blog Content Structure

Our demo blog will have this structure inside the /content directory:

1├── blog
2│ ├── _index.md
3│ ├── a-great-article
4│   └── cover.jpg
5│ │ └── index.md
6│ └── another-great-article
7│   └── cover.jpg
8│   └── index.md

blog/_index.md is a Partial content that will show a list of all available blog posts.

Each blog post has its directory, including an index.md and a cover.jpg file.

The index.md files include Front-matter at the top of the file to provide meta-data to pages, like title, date, and the cover image URL:

1---
2title: A Great Article
3date: 2018-05-11
4cover: /content/blog/a-great-article/cover.jpg
5---
6
7This is a great article body!

Simple Navigation

First, we need simple navigation in our application to be able to navigate to our blog page.

Let's start by adding a default layout in layouts:

1<template>
2  <div>
3    <nav>
4      <NuxtLink to="/" class="link">Home</NuxtLink>
5      <NuxtLink to="/blog" class="link">Blog</NuxtLink>
6    </nav>
7    <main>
8      <slot />
9    </main>
10  </div>
11</template>
12
13<style>
14.link {
15  margin-right: 1rem;
16}
17</style>

In our app.vue we need to wrap the NuxtPage component with the NuxtLayout component:

1<template>
2  <div>
3    <NuxtLayout>
4      <NuxtPage />
5    </NuxtLayout>
6  </div>
7</template>

Finally, we create a index.vue in pages directory:

1<template>
2  <h1>Home</h1>
3</template>

Home Page

Blog List

Let's look at how we can implement a list of all available blog posts.

First, we need to create a BlogPosts.vue Vue component in components/content/ that queries and renders all available blog posts:

1<template>
2  <h1>Blog</h1>
3  <ul>
4    <li v-for="{ _path: slug, title } in blogPosts" :key="slug">
5      <NuxtLink :to="slug">{{ title }}</NuxtLink>
6    </li>
7  </ul>
8</template>
9
10<script setup lang="ts">
11const blogPosts = await queryContent('/blog')
12  .sort({ date: -1 }) // show latest articles first
13  .where({ _partial: false }) // exclude the Partial files
14  .find()
15</script>

We use the queryContent function from Nuxt to query a list of our blog posts.

Now we can reference this Vue component inside our content/blog/_index.md file:

1---
2title: Blog
3---
4
5::blog-posts

We can use any component in the components/content/ directory or any component made available globally in your application in Markdown files.

If we now click on the "Blog" navigation link in our application, we can see a list of all available blog posts:

Blog Post List

Blog Post Page

Finally, we need to create a dynamic route for the blog posts. Thus, we create a [...slug].vue file in pages/blog:

1<template>
2  <ContentDoc :path="$route.params.slug ? `/blog/${$route.params.slug[0]}` : '/blog'">
3    <template #not-found>
4      <h2>Blog slug ({{ $route.params.slug }}) not found</h2>
5    </template>
6  </ContentDoc>
7</template>

We use the current slug in the route parameters ($route.params.slug) to determine whether we want to render the blog post list or an individual blog post.

We can now see the content of the corresponding blog post:

Blog Post

Conclusion

It's effortless to create a Markdown file-based blog using Nuxt Content v2. This article demonstrates the basic steps to set up such a blog.

You can expect more Nuxt 3 posts in the following months as I plan to blog about interesting topics that I discover while rewriting my portfolio website.

If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.

I will never share any of your personal data. You can unsubscribe at any time.

If you found this article helpful.You will love these ones as well.
Focus & Code Diff in Nuxt Content Code Blocks Image

Focus & Code Diff in Nuxt Content Code Blocks

A Comprehensive Guide to Data Fetching in Nuxt 3 Image

A Comprehensive Guide to Data Fetching in Nuxt 3

Use Shiki to Style Code Blocks in HTML Emails Image

Use Shiki to Style Code Blocks in HTML Emails

How I Replaced Revue With a Custom-Built Newsletter Service Using Nuxt 3, Supabase, Serverless, and Amazon SES Image

How I Replaced Revue With a Custom-Built Newsletter Service Using Nuxt 3, Supabase, Serverless, and Amazon SES