Markdown content not rendering on a static/single page, but loading fine in v-for rendered 'blog' pages - NetlifyCMS/Nuxt

Netlify CMS
,
1

Hi

Netlify CMS / Nuxt - I hope this is the right place to post as I’m not sure if it’s NetlifyCMS or Nuxt but I feel I’ve got the Nuxt stuff about right.

I’ve got a blog-style site which is running fine both locally and within netlify cms - uses ‘projects’ instead of ‘blog’ - but I’m hitting a snag when trying to load content into a non-blog/single page.

I’m using the @nuxtjs/content module in conjunction with markdown files and this works fine with the ‘projects’ pages rendered via standard v-for etc.

The issue occurs in trying to populate the Homepage with markdown from the CMS using bog-standard asyncData - this is a single/static non-blog type page at: pages/index.vue

Here’s the relevant project file structure:

│
└───content
│   └───homepage
│       │   homepage-copy.md
│
│   └───projects
│       │   project-01.md
│       │   ... etc
│   
└───pages
│   └───projects
│       │   index.vue
│       │   _slug.md     
     index.vue

Here’s the config.yml for the homepage:

collections:
  - name: 'homepage'
    label: 'Homepage'
    folder: 'content/homepage'
    format: 'frontmatter'
    create: true
    editor:
      preview: true
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Background Image', name: 'bgImage', widget: 'image' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

Here’s roughly what’s on homepage-copy.md:

---
title: 'Homepage project title'
description: 'this is from the the description tag'
---
Some stuff for 'nuxt-content' just like the projects pages...

Here’s the Vue script on ./pages/index.vue - set up for asyncData to consume the single mardown file from /content/homepage/:

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

  return {
    page
  }
}

Here’s the html:

<div class="column content">
  <h1>Title: {{ page.title }}</h1>
  <p>Description: {{ page.description }}</p>
  <nuxt-content :document="page" />
</div>

Here’s what’s rendering in the browser - screenshot - I can see vue-generated data tags and nuxt-content-container where expected, but nothing is rendering from the markdown file.
This leads me to think I’ve got a config issue somewhere with Netlify CMS:

Screenshot 2021-01-07 at 20.00.39

Can anyone advise why I haven’t got any data rendering on Homepage from the markdown?
Thanks in advance

2

Turns out this is really simple.

Adding console.log(page) shows an array>object, mapping everything available.

Looking at that it became clear I needed to add the full path to the single page markdown file homepage-copy.md, excluding the extension, like this:

async asyncData({ $content }) {
  const page = await $content('homepage/homepage-copy').fetch()

  console.log(page)

  return {
    page
  }
}

Then in the markup the content will now render:

<nuxt-content :document="page" />

Job done.

1 Like