Build a blog using Nuxt and Tailwind CSS

Q: How do I fetch posts in Nuxt Content v3?

Use queryCollection('blog').order('createdAt', 'DESC').all() inside useAsyncData. For one post, use queryCollection('blog').path(route.path).first().

Q: What is the difference between nuxt build and nuxt generate?

nuxt build creates a server app. nuxt generate pre-renders every page to static HTML files, which you can host on any static host such as Netlify.

Sachin Ghait·Feb 1, 2021·Updated Sep 29, 2026·10 min readFresh·Updated Sep 29, 2026

TL;DR: A walkthrough of how this blog was built using Nuxt, Tailwind CSS, and Tailblocks for pre-made UI components. Covers creating the Nuxt app, adding the content module for Markdown-based blog posts, styling with Tailwind, and displaying blog data dynamically. The post also covers generating a static build and deploying it to Netlify for free hosting with automatic deploys.

In this post I will walk you through how I created this blog

Version note: this post shows the original Nuxt 2 setup with Nuxt Content v1 ($content). This blog now runs on Nuxt 4 with Nuxt Content v3, where you fetch posts with queryCollection('blog') instead. The overall steps are the same.

Frameworks used

Nuxt
Tailwind CSS
Tailblocks

What is Nuxt?

Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js. You can also create Static sites and server side rendered webapp with nuxt. It abstracts most of the complex configuration involved in managing things like asynchronous data, middleware, and routing.

How do I create a Nuxt app?

Create nuxt app using below command

yarn create nuxt-app <project-name>

You can choose to add nuxt content module while project create. Or you can add it manually by following the Nuxt Content installation guide.

yarn add @nuxt/content

How do I add ready-made UI blocks from Tailblocks?

Navigate to tailblocks.cc. Choose any header footer and content blocks you like. Add these blocks to nuxt layouts/default.vue file

<div>
    <Header></Header>
    <Nuxt/>
    <Footer></Footer>
</div>

<Nuxt/> will render pages as per routes. Add pages/index.vue and pages/blog/index.vue they will serve on / and /blog route. Put homepage content in pages/index.vue and blog layout in pages/blog/index.vue

Writing Content

create a content/ directory in your project:

content/
  blogs/
    article-1.md
    article-2.md
  home.md

In Each article.md file you can add your content as below

---
title: Introduction
description: Learn how to use @nuxt/content.
---
## Markdown content
more details...

How do I display blog posts?

You need to fetch all posts as below and display in your vue template

async  asyncData({ $content }) {
    const  posts  =  await  $content('blog').fetch()
    return {
        posts,
    }
},

posts variable will have all posts from that folder, you can loop over and display them in any format. There are various ready to use blocks on tailblocks.cc.

Further you can create a pages/blog/_slug.vue this will show content for route /blog/article-1. You need to fetch individual post as below and display in your vue template

async  asyncData({ $content, params }) {
    const  post  =  await  $content('blog', params.slug).fetch()
    return { post }
},

How do I create a static build?

After you have created the blog setup, static build can be generated by using below command

nuxt generate //or
npm run generate

Bonus: How do I host it on Netlify?

You can easily host project from github on netlify.

Go to www.netlify.com and login or signup.
Select “New site from git”.
Choose your provider (e.g. GitHub) — You may need to authenticate here.
Select the git repository you want to create a site from.
Select the branch you want to deploy from.
Choose any commands that need to be run. — in our case its npm run generate
Choose the directory that you will publish from. It will contain files such as index.html. — in our case its dist.
Select “Build Site”.

How do I host it on Cloudflare Pages?

This blog is now hosted on Cloudflare Pages. In the Pages project I connect the GitHub repository, then set:

Production branch: main
Build command: bun install && bun run generate
Build output directory: dist

Every push to main triggers a new deploy automatically. See the Cloudflare Pages docs for the full setup.

Source code

ssghait007/blog on GitHub