Creating a Dynamic Blog with Nuxt 2026 and Content Module

What You'll Build

In this tutorial, you will learn how to create a dynamic blog using Nuxt 2026 and the Content Module. By the end, you'll have a fully functional blog with dynamic content, allowing you to easily manage and display posts. The blog will feature:

• A homepage displaying a list of blog posts
• Individual pages for each blog post
• Markdown support for writing posts
• Easy navigation between posts

Here's a sneak peek of what the final blog will look like:

Why This Matters

Creating a dynamic blog with Nuxt and the Content Module is a practical solution for developers looking to build content-driven applications. This approach is particularly beneficial for:

• Developers who want to quickly set up a blog without building a backend from scratch.
• Content creators who need a simple, yet effective way to manage posts.
• Small businesses or personal projects that require a lightweight, static site with dynamic capabilities.

By leveraging Nuxt's static site generation and the flexibility of the Content Module, you can create a performant, SEO-friendly blog with minimal setup.

Architecture Overview

Our blog will follow a simple architecture, leveraging Nuxt's powerful static site generation capabilities. Here's a basic overview of how everything fits together:

+-----------------+
| Nuxt 2026       |
| +---------------+
| | Content Module|
| +---------------+
| | Pages         |
| +---------------+
| | Components    |
+-----------------+

• Nuxt 2026: The framework that provides the structure and tooling for building our application.
• Content Module: A module for managing and accessing content written in Markdown.
• Pages: Where we define the routes and templates for our blog pages.
• Components: Reusable pieces of UI, such as headers and footers.

Step-by-Step Implementation

Let's dive into the implementation. We'll start by setting up a new Nuxt project and gradually build out our blog.

Step 1: Set Up a New Nuxt Project

First, we need to create a new Nuxt project. Open your terminal and run the following command:

npx nuxi init my-blog

This command initializes a new Nuxt project in a directory called my-blog. Follow the prompts to select default options for your project.

Next, navigate into your project directory:

cd my-blog

Then, install the dependencies:

npm install

This will set up your project with all the necessary packages.

Step 2: Install the Content Module

With our project set up, the next step is to install the Nuxt Content Module. This module allows us to manage and access content written in Markdown.

Run the following command to install the module:

npm install @nuxt/content

After installation, add the module to your nuxt.config.js file:

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ]
})

This configuration enables the Content Module in your project, allowing you to use its features.

Step 3: Create Blog Content

Now, let's create some content for our blog. We'll use Markdown files to represent our blog posts.

Create a new directory called content in the root of your project:

mkdir content

Inside the content directory, create a Markdown file for your first blog post, e.g., hello-world.md:

---
title: "Hello World"
description: "This is our first blog post."
date: "2023-10-01"
---

# Hello World

Welcome to our new blog! This is our first post using Nuxt and the Content Module.

This Markdown file includes front matter with metadata about the post and the content of the post itself.

With these steps, you've set up the foundation for your dynamic blog. In the next steps, we'll build out the pages and components needed to display this content dynamically.

Step 4: Create the Blog List Page

Now that we have some content, let's create a page to display the list of blog posts. In Nuxt, pages are defined in the pages directory. Create a new file called index.vue inside the pages directory:

<template>
  <div>
    <h1>Blog</h1>
    <ul>
      <li v-for="article in articles" :key="article.slug">
        <NuxtLink :to="`/blog/${article.slug}`">{{ article.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useAsyncData } from '#app'
import { queryContent } from '@nuxt/content'

const { data: articles } = await useAsyncData('content', () =>
  queryContent().only(['title', 'slug']).find()
)
</script>

This page uses Nuxt's useAsyncData to fetch all articles from the content directory. It lists each article with a link to its detail page using NuxtLink.

Step 5: Create Individual Blog Post Pages

To display individual blog posts, create a new directory called blog inside the pages directory. Then, create a file named [slug].vue:

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.description }}</p>
    <nuxt-content :document="article" />
  </div>
</template>

<script setup>
import { useAsyncData } from '#app'
import { queryContent } from '@nuxt/content'
import { useRoute } from 'vue-router'

const route = useRoute()
const { data: article } = await useAsyncData('content', () =>
  queryContent().where({ slug: route.params.slug }).findOne()
)
</script>

This file uses the slug from the URL to fetch and display the corresponding blog post. The nuxt-content component renders the Markdown content.

Step 6: Add Navigation and Styling

Finally, let's add some basic navigation and styling to improve the user experience. Create a components directory and add a file named Header.vue:

<template>
  <header>
    <nav>
      <NuxtLink to="/">Home</NuxtLink>
    </nav>
  </header>
</template>

<style scoped>
nav {
  background-color: #333;
  padding: 1rem;
}

nav a {
  color: #fff;
  margin-right: 1rem;
  text-decoration: none;
}
</style>

Include this header in your default.vue layout file located in the layouts directory:

<template>
  <div>
    <Header />
    <NuxtPage />
  </div>
</template>

<script setup>
import Header from '~/components/Header.vue'
</script>

This setup provides a simple navigation bar at the top of your pages. You can expand this with more links or styles as needed.

Common Mistakes

• Incorrect Module Configuration: Ensure the @nuxt/content module is correctly added to nuxt.config.js. Missing this step can lead to errors when trying to access content.
• File Naming: Remember that Nuxt uses file-based routing. Incorrectly named files or directories can result in routing errors.
• Markdown Front Matter: Ensure your Markdown files have the correct front matter. Missing or malformed front matter can cause parsing issues.

How I Would Use This

I would use this setup for small to medium-sized blogs where content is primarily static but needs dynamic generation for SEO benefits. It's perfect for personal blogs, small business sites, or technical documentation. However, for larger sites with complex data relationships or high traffic, consider a more scalable backend solution.

Lessons Learned

• Static vs. Dynamic: Nuxt's static site generation is powerful for SEO and performance but consider dynamic generation for frequently updated content.
• Content Organization: Keeping content organized with clear naming conventions and directory structures simplifies management.
• Performance: While Nuxt's static generation is fast, ensure your hosting solution can handle build times if you have a large number of posts.

Next Steps

• Explore Nuxt Modules: Look into other Nuxt modules that can enhance your blog, such as @nuxt/image for optimized image loading.
• Deploying Your Blog: Learn about deploying your blog to platforms like Vercel or Netlify for easy static hosting.
• Advanced Customization: Dive deeper into custom components and plugins to extend your blog's functionality.

Sources

• Nuxt Content Documentation
• Nuxt 2026 Official Documentation
• Markdown Guide