Nuxt.js create wrong path in Netlify CMS second collection

Question

When I add a new collection to config.yml I get the wrong path from nuxt query-builder.

There is my config.yml

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

media_folder: static/img
public_folder: /img

collections:
  - name: 'blog'
    label: 'Blog'
    folder: 'content/blog'
    format: 'frontmatter'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
      - label: "Featured Image"
        name: "thumbnail"
        widget: "image"
        choose_url: true
        default: "/uploads/chocolate-dogecoin.jpg"
        media_library:
          config:
            multiple: true
  - name: 'some'
    label: 'Some'
    folder: 'content/some'
    format: 'frontmatter'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
      - label: "Featured Image"
        name: "thumbnail"
        widget: "image"
        choose_url: true
        default: "/uploads/chocolate-dogecoin.jpg"
        media_library:
          config:
            multiple: true

In site/admin/#/collections/some i can create new posts and all work fine but when I go to the link to the posts from some collection that does not work.

Devtools in dev mode show error from the nuxt query-builder file and path from blog collection http://localhost:3000/_content/blog/2022-06-17-some. But http://localhost:3000/_content/some/2022-06-17-some should be.

Blog collection links work well.

https://lively-alfajores-b70fe0.netlify.app/

score 1 · Answer 1 · edited Jun 19 '22 at 09:42

I needed to set up a dynamic path instead static one. I just replaced file _slug.vue to _.vue from documentation examples.

_slug.vue code:

https://www.netlifycms.org/docs/nuxt/#example-blog-post

<template>
  <div>
    <h2>{{ post.title }}</h2>
    <nuxt-content :document="post" />
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params, error }) {
    let post;
    try {
      post = await $content("blog", params.slug).fetch();
      // OR const article = await $content(`articles/${params.slug}`).fetch()
    } catch (e) {
      error({ message: "Blog Post not found" });
    }

    return {
      post,
    };
  },
};
</script>

_.vue code:

https://content.nuxtjs.org/v1/community/snippets#dynamic-routing

<script>
export default {
  async asyncData ({ $content, app, params, error }) {
    const path = `/${params.pathMatch || 'index'}`
    const [article] = await $content({ deep: true }).where({ path }).fetch()
    if (!article) {
      return error({ statusCode: 404, message: 'Article not found' })
    }
    return {
      article
    }
  }
}
</script>

Nuxt.js create wrong path in Netlify CMS second collection

1 Answers1