Render Multiple Collections

README.md

Render Multiple Collections

To render dynamic pages for multiple collections, create directories for the collections in pages/, and then in each of those, add a _slug.vue file. This file will create a dynamic page

Rendering Example

• This directory structure:

pages/
  |- index.vue
  |- blog/
    |- _slug.vue
    |- index.vue
  |- code/
    |- _slug.vue

• Will look for these files:

content/
  |- blog/
    |- article-1.md
    |- article-2.md
  |- code/
    |- example-1.md
    |- example-2.md

• And it will create this router setup

router: {
  routes: [
    {
      name: 'index',
      path: '/',
    },
    {
      name: 'article-1',
      path: '/blog/article-1',
    },
    {
      name: 'article-2',
      path: '/blog/article-2',
    },
    {
      name: 'blog',
      path: '/blog'
    }
    {
      name: 'example-1',
      path: '/code/example-1',
    },
    {
      name: 'example-2',
      path: '/code/example-2',
    }
  ]
}

Debugging Tips

• If a page is giving a 404 error:
  • double check all the naming conventions
    • start with the url to see what's actually there
    • then look at your content folder names
    • then look at what you are declaring in your nuxt links
• If you are getting a catch error regarding the catch statement
  • change catch (error) to catch(e)
• NAN showing up as page title for a link made from collection content
  • Check config.yml
    • Are there - in your naming convention for your fields?
    • ie: - {label: "Recipe Name", name: "recipe-name"}
    • Then change it to camel case
    • ie: -{ label: "Recipe Name", name: "recipeName"}
• Does the page load but give you a An Error Has Occured message where the dynamic content should load?
  • check for a _slug.vue file in the relevant directory in pages
    • if this doesn't exist, create it and add the nuxt-content and asyncData to it
    • this will dynamically create pages for your markdown files in content/dirname