Javascript is required
·
3 min read

Create a Blog With Nuxt Content v2

Create a Blog With Nuxt Content v2 Image

I prefer simple Markdown files as the content source for my blog posts. In this article, I want to show you how can set up a simple blog using Nuxt Content v2.

Nuxt Content v2

Nuxt Content v2 is a Nuxt 3 module that reads local files from the /content directory in your project. It supports .md, .yml, .csv and .json files. Additionally, it's possible to use Vue components in Markdown with the MDC Syntax.

Setup Nuxt App

First, let's start a new Nuxt Content project with:

bash
npx nuxi init nuxt-demo-blog -t content

Then we need to install the dependencies in the nuxt-demo-blog folder:

bash
yarn install

Now we can start the Nuxt content app in development mode:

bash
yarn dev

A browser window should automatically open for http://localhost:3000. Alternatively, you can start playing with Nuxt Content in your browser using StackBlitz or CodeSandbox.

The following StackBlitz sandbox demonstrates the simple blog application we create in this article:

Blog Content Structure

Our demo blog will have this structure inside the /content directory:

1├── blog
2│ ├── _index.md
3│ ├── a-great-article
4│   └── cover.jpg
5│ │ └── index.md
6│ └── another-great-article
7│   └── cover.jpg
8│   └── index.md

blog/_index.md is a Partial content that will show a list of all available blog posts.

Each blog post has its directory, including an index.md and a cover.jpg file.

The index.md files include Front-matter at the top of the file to provide meta-data to pages, like title, date, and the cover image URL:

1---
2title: A Great Article
3date: 2018-05-11
4cover: /content/blog/a-great-article/cover.jpg
5---
6
7This is a great article body!

Simple Navigation

First, we need simple navigation in our application to be able to navigate to our blog page.

Let's start by adding a default layout in layouts:

1<template>
2  <div>
3    <nav>
4      <NuxtLink to="/" class="link">Home</NuxtLink>
5      <NuxtLink to="/blog" class="link">Blog</NuxtLink>
6    </nav>
7    <main>
8      <slot />
9    </main>
10  </div>
11</template>
12
13<style>
14.link {
15  margin-right: 1rem;
16}
17</style>

In our app.vue we need to wrap the NuxtPage component with the NuxtLayout component: