Imagine this: You’ve got a story to tell or expertise to share—maybe about tech, travel, or tasty recipes. Creating a blog can be an exciting way to connect with your audience, showcase your knowledge, and build a personal or professional brand. With Nuxt 3, @nuxt/content, and Tailwind CSS, you’ll not only have a blog that looks polished but one that’s lightning-fast and easy to maintain.

This guide will take you step by step through setting up a modern blog that’s both functional and beautiful. By the end, you’ll have:

A fully configured blog using Nuxt and @nuxt/content.
A clear understanding of how to manage content with Markdown.
A responsive design powered by Tailwind CSS.
Dynamic routing, categories, tags, and much more.

Let’s get started!

Quick Links to Resources

Setting Up Your Nuxt 3 Project

Before we dive into the blog-specific features, let’s set up a Nuxt 3 project. Open your terminal and run the following commands:

npx nuxi@latest init myblog -t content
cd myblog
pnpm install  # or npm install / yarn install
pnpm run dev  # or npm run dev / yarn dev

This command initializes a new Nuxt 3 project with the content template, which includes:

A Nuxt 3 app preconfigured for @nuxt/content.
Example Markdown files (content/ folder).
Placeholder components and pages to help you get started.

Project Structure after Initialization

Your project will have a structure similar to this:

myblog
├── .data
│   └── content
│       └── contents.sqlite
├── app
│   ├── components
│   │   ├── Alert.vue
│   │   └── Counter.vue
│   ├── pages
│   │   └── [...slug].vue
│   └── public
│       └── favicon.ico
├── content
│   ├── about.md
│   └── index.md
├── server
│   └── tsconfig.json
├── content.config.ts
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── README.md
└── tsconfig.json

The .data/ folder contains an experimental SQLite database for @nuxt/content. If you prefer pure file-based blogging, you can safely ignore or remove this.

Customizing Your Project Layout

To align the project structure with standard Nuxt practices, let’s reorganize the files:

Move app/components into a components/ folder.
Move app/pages into the pages/ directory.
Keep content/ for your Markdown posts.

Your updated structure will look like this:

myblog
├── components
│   ├── Alert.vue
│   └── Counter.vue
├── content
│   ├── about.md
│   └── index.md
├── pages
│   └── [...slug].vue
├── public
│   └── favicon.ico
├── server
│   └── tsconfig.json
├── content.config.ts
├── nuxt.config.ts
├── package.json
├── pnpm-lock.yaml
├── README.md
└── tsconfig.json

Re-run your development server:

pnpm run dev

Everything should still work as before!

Adding Markdown Files for Blogging

To create your blog posts, add a blog/ folder inside content/ and create Markdown files for your posts. For example:

content
├── about.md
├── index.md
└── blog
   ├── first-blog.md
   ├── second-blog.md
   └── third-blog.md

Each .md file can include frontmatter for metadata:

---
title: "My First Blog"
date: "2025-01-01"
tags: ["introduction"]
---

# Welcome to My Blog!

This is my very first post using Nuxt 3 and @nuxt/content.

Defining Collections for Content

To better manage your posts, let’s define collections in content.config.ts:

import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**',
    }),
    blog: defineCollection({
      type: 'page',
      source: 'blog/*.md',
    }),
  },
})

This separates content/ into:

General pages (like about.md, index.md).
Blog posts (everything in blog/*.md).

Creating a Blog Listing Page

Next, we’ll create a blog listing page at pages/blogs.vue:

<script setup lang="ts">
import { queryCollection } from '#content'
import { useAsyncData } from '#app'

const { data: posts } = await useAsyncData('blog', () => queryCollection('blog').all())
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold">Blogs</h1>
    <ul>
      <li v-for="post in posts" :key="post._id">
        <NuxtLink :to="post._path">{{ post.title }}</NuxtLink>
      </li>
    </ul>
  </div>
</template>

Visit http://localhost:3000/blogs to see a list of your posts.

Adding Tailwind CSS for Styling

To style your blog, install and configure Tailwind CSS:

pnpm add --save-dev @nuxtjs/tailwindcss

Add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
})

Optionally, create tailwind.config.ts:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './pages/**/*.vue',
    './content/**/*.{md,mdx}',
  ],
  theme: {
    extend: {},
  },
}

With Tailwind, your blog will look clean and modern.

Next Steps

Congratulations! You’ve set up a modern blog with Nuxt 3, @nuxt/content, and Tailwind CSS. From here, you can:

Add categories and tags.
Customize layouts for individual posts.
Implement SEO and social sharing.

Stay tuned for future guides on advanced topics like dynamic layouts and deployment strategies!