Nuxt Content List

README.md

Nuxt Content List

This is for adding links to your articles onto a page

This example will pull content from the content module (which tracks the files created by netlify cms), and render a series of links for all the articles.

Create a set of links to your posts

Script Tag

You add this to the script tag in your vue file to access content from netlify cms

<script>
  export default {
    async asyncData({ $content }) {
        const posts = await $content("blog").fetch();
        return {
          posts
        };
    },
  }
</script>

• In this example, the "blog" is referring to a collection title
• Documentation on async/await functions

Template Tag

• This code snippit uses two different vue directives
  • v-for: creates a for look
    • the :key is used to indicate the object being counted that are looped through
  • v-bind: binds data from the script to a variable in the html tag for use
    • NOTE v-bind has a shorthand, use : instead of v-bind:
  • The mustache syntax {{}} is used to render content onto the page.

<template>
<div>
  <ul>
    <li v-for="post in posts" :key="post.slug">
      <NuxtLink v-bind:to="post.slug">{{ post.title }}</NuxtLink>
    </li>
  </ul>
</div>
</template>