Nuxt & Nuxt Content Module

Install Nuxt

With the nuxt-create-app 3.1.0 you can install the Nuxt Content Module.

Run npx nuxt-create-app and choose your options.

For the content module and a static generation, choose :

Nuxt.js modules: Progressive Web App (PWA), Content
Rendering mode: Universal (SSR / SSG)
Deployment target: Static (Static/JAMStack hosting)

Add some content

A content folder is created by Nuxt at the root of your project.
To start create a homepage.md file with some content.
You can use frontmatter for the title and description.

---
title: Build a JAMStack website with Nuxt, Nuxt Content Module ans Forestry
description: A step by step guide to build a static site with Nuxt, the Nuxt Content module and Forestry as a headless CMS. JAMstack ready!
---

# Static website with Nuxt & Forestry as a headless CMS

Next, create a folder articles and a .md file. That's your first blog post!

Fetch and display the content

Run npm run dev to see the default content Nuxt has created.

To see the content in homepage.md we need to update de index.vue page.

Replace the <template> content by something like

<template>
  <div class="container">
    <nuxt-content :document="homepage" />
  </div>
</template>

The <nuxt-content> component is a new component coming with the Nuxt Content Module.

Update the <script> with :

export default {
  async asyncData ({ $content }) {
    const homepage = await $content('homepage').fetch()

    return {
      homepage
  }
}

We are fetching the content from the homepage.md file, and display it with the <nuxt-content> component.

Next, we'll display the articles…