Nuxt Blog

Nuxt Blog is a personal blog template that compiles markdown files into a server-side-rendered Nuxt 4 website with automatic categories, search, pagination, RSS, and SEO features.

What is Nuxt Blog?

Nuxt Blog is a personal blog site template built with Nuxt 4, Nuxt Content 3, Vue 3, and Tailwind CSS. It takes markdown files placed in the ./content/blogs folder as input and outputs a complete blog website: a blog list page with search and pagination, individual post pages with auto-generated tables of contents, an About page, an RSS feed, and an XML sitemap. The site is server-side rendered (SSR) and can be deployed to Vercel with npm run build. The template requires Node.js 20.19+ to build.

Key Features

• Markdown blogging — Write posts in markdown and drop them into ./content/blogs; no database or CMS required.
• Automatic category generation — Categories are derived from each post's metadata, so new topics appear without manual setup.
• Blog list with search and pagination — Readers can search across posts and page through the list on the main blog page.
• Auto table of contents — Each post gets a TOC generated from its headings, making long articles easier to navigate.
• Auto sitemap — An XML sitemap is generated automatically, which helps with search engine indexing.
• URL preview images — Uses Nuxt ogImage to generate Open Graph preview images for social sharing.
• Dark and light mode — A theme toggle switches between light and dark styles, built with Tailwind CSS.
• Server-side rendering — The Nuxt 4 app is SSR-enabled, improving load times and SEO despite being a content site.
• RSS feed — Subscribers can follow the blog through an auto-generated RSS feed.

Who is it for?

• Developers who want a minimal, code-based personal blog without the weight of a CMS.
• Technical writers who prefer authoring in markdown and want automatic SEO outputs like sitemaps and Open Graph images.
• Portfolio owners who need a blog plus an About me page to present professional information.

What can you do with Nuxt Blog?

• Personal bloggers: Publish markdown posts and get a fast, SEO-ready site with search, pagination, RSS, and dark mode out of the box.
• Developers: Extend the Nuxt 4 and Tailwind CSS source code to change layouts, add components, or integrate analytics.
• Portfolio creators: Use the About me page and the blog to write articles that showcase your expertise alongside a bio.

How does Nuxt Blog work?

The template is set up as a standard Nuxt 4 project. Clone the repository or use it as a GitHub template, then edit ./app/data/index.ts to add your personal information. Add markdown files to the ./content/blogs folder, and the site automatically builds categories, the blog list, TOCs, sitemap, RSS, and preview images. Run yarn install, then yarn run dev for local development at localhost:5173, or yarn run build for production.