A few months ago making a simple static blog using Nuxt was very stressful, you would needed to install a bunch of packages and write monkey patch solutions to make it work and in the end it wasn’t even that good, but now everything has changed, with the release of the content package, an official package from the Nuxt team, creating a blog is really nice and easy.

In this article I’ll show you how you can create your very own blog using Nuxt.js and Markdown with just a few steps.

Setup

First things first, we need to create a new Nuxt app:

yarn create nuxt-app my-project

A prompt will appear, asking what do you want to use in the new app.

Choose as follows:

1. Javascript.
2. Yarn.
3. Up to you.
4. None.
5. PWA and DotEnv.
6. Eslint.
7. None.
8. Universal.
9. None.

Great, now that we have a project we can start working on our blog.

Required Packages

In order to use the magical content package we must install it first, let’s go ahead and do that now:

yarn add @nuxt/content

And to finish it off, register the new package as a module in the configuration file:

// nuxt.config.js

export default {
  modules: [
    '@nuxt/content',
    // other modules...
  ]
}

Fetching Content

In order to display the content we must first fetch the data right?! Create a new folder under the pages directory called blog. In that folder create a new file named _slug.vue, this will take care of our content.

Let’s edit the slug page so it retrieves our posts:

<!-- pages/blog/_slug.vue -->

<template>
  <nuxt-content :document="article" />
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const article = await $content(params.slug).fetch()

    return {
      article
    }
  }
}
</script>

Writing Content

By default the package will fetch Markdown files found in the content/ directory, make sure to create it at the root of your project.

assets/
components/
content/
...

Create a new file in that directory. I’ll just use random-post.md for the sake of the tutorial. Front Matter (metadata) is also included, just wrap the content around triple-dashed lines ---.

---
title: Random Post
---

# Random Post

Nothing to see here actually...

Displaying Content

Since we have included a <nuxt-content> tag in our template section earlier (on _slug.vue) you should be able to see the post now. Browse to /blog/random-post and check the page contents.

Final Words

There are a lot of things you can do with this package, advanced configuration, hooks and etc. Feel free to check the documentation here.

Thanks for reading, cya in the next post!