D
Docs
Documentation Blogging System

Blogging System

SprintKit includes a powerful, extensible blogging system built with Nuxt Content. This guide covers how the blog works, how to add new posts, and best practices for customization.

Overview

  • Markdown-based: Write posts in Markdown with frontmatter for metadata.
  • Dynamic Routing: Blog posts are rendered using dynamic routes (pages/blog/[...slug].vue).
  • Categories & Tags: Organize posts by category and tag for easy filtering.
  • Featured Posts: Highlight important posts on the blog homepage.
  • SEO & Sharing: Automatic meta tags, Open Graph, and Twitter card support.
  • Custom Components: Use Vue components directly in Markdown for rich content.

Content Structure

Blog posts live in content/blog/:

content/
  blog/
    2024-01-01-welcome.md
    2024-01-15-tutorial.md

Each post uses frontmatter for metadata:

---
title: "Your Article Title"
description: "A compelling description for SEO"
author: "Author Name"
publishedAt: "2024-01-25"
updatedAt: "2024-01-26"
tags: ["tag1", "tag2"]
category: "Category Name"
featured: true
draft: false
coverImage: "https://..."
readingTime: 5
---

Adding a New Post

  1. Create a new .md file in content/blog/.
  2. Fill out the frontmatter fields (see above).
  3. Write your content in Markdown. You can use custom Vue components (e.g., ::code-block{}) for advanced formatting.
  4. Save and commit your changes. The post will appear automatically in the blog UI.

Dynamic Routing & Layouts

  • All blog posts are rendered via pages/blog/[...slug].vue.
  • The blog homepage is at pages/blog/index.vue and lists posts, categories, tags, and supports search/filtering.
  • The layouts/blog.vue provides a sidebar with categories, recent posts, and blog stats.

Queries & Composables

Use the useBlog composable for advanced queries:

  • Fetch all posts, by category, tag, featured, or paginated
  • Search posts by title, description, author, tags, or category
  • Get related posts, categories, and tags with counts

Nuxt Studio

Nuxt studio ready you can just plug-n-play the deploy URL.

Best Practices

  • Use consistent frontmatter for all posts.
  • Use categories and tags for better organization.
  • Mark important posts as featured: true.
  • Use the draft: true field to hide posts from public view.
  • Add a coverImage for visual appeal.
  • Use custom components for rich content.

SEO & Sharing

  • Meta tags and Open Graph data are set automatically from frontmatter.
  • Social sharing is supported via the Share button on each post.

Extending the Blog

  • Add new fields to the frontmatter as needed (update content.config.ts schema).
  • Customize layouts and components for your needs.
  • Use the useBlog composable for custom queries and features.

For more details, see the Nuxt Content documentation and explore the blog source code in this project.