Nuxt 3


For the blog feature supastarter integrates Nuxt Content (opens in a new tab), a markdown (MDC (opens in a new tab)) based CMS.


Why Nuxt Content:
It is a great alternative to headless CMS like Contentful or Prismic. It is free, open source and the content is located right in your repository. It introduces easy data APIs with the MongoDB-like query builder (opens in a new tab) to fetch the right data at the right time.

Create a new blog post

To create a new blog post, create a new .md file in the /apps/web/content/blog. The file name will be the url slug of the post. For example, if you want the url to be (opens in a new tab), then the file name should be

The file will start with a frontmatter (opens in a new tab) block, which is a yaml-like block that contains metadata about the post. The frontmatter block should be surrounded by three dashes (---).

title: My awesome blog post
description: In this post I'm going to tell you about my awesome blog.
draft: false
  src: '/images/blog/cover.png'
date: 2023-02-28
authorName: Elon Musk
authorImage: /images/blog/author2.jpg
tags: [awesome, post]

The frontmatter block contains the following fields:

  • title: The title of the blog post
  • description: A short description of the blog post that will be shown in the blog overview
  • draft: Whether the blog post should be publically listed or not (boolean)
  • image: The cover image data of the blog post
    • src: The url of the image
  • date: The date of the blog post
  • authorName: The name of the author of the blog post
  • authorImage: The url of the image of the author of the blog post
  • tags: A list of tags

After the frontmatter block, you can write the content of the blog post in markdown (MDC (opens in a new tab)):

In this post I'm going to tell you about my awesome blog.