CPNT 200 Day 3 - Integrating CMS with Nuxt Frontend

Assignment 3 - JAMstack Setup

• Due: November 24 @ 11:59
• Push a blog article onto your nuxt page dynamically
• Deploy to Netlify

Topics

• Review Collections and Fields
• Nuxt-Content Setup
• Dynamically load CMS posts into Nuxt
• CSS Framework Exploration

Resources

• Fixing NPM Vulnerabilities Guide
• Netlify CMS Collections Tutorial
• Nuxt Content Documentation
• Nuxt Content Module Article
• Fetching Content

Netlify CMS Collections and Fields Review

• Review yaml syntax for nested lists
  • white space sensitive
  • Creating different widgets
• Netlify CMS Collections Gist
  • This is the example we used in class. it shows a few use cases for setting up a content editor. Note the nesting and indentation styles

Nuxt-Content Setup

• Make sure that you have installed the module @nuxt/content
  • If it's not in your package.json file, run npm i @nuxt/content
  • Then add it to the nuxt.config.js file:

  {
  modules: [
    '@nuxt/content'
  ],
  content: {
    // Options
  }
  

}```

• nuxt-content allows you to use:
  • $content
  • fetch()
  • asyncData
  • <nuxt-content> component
• This allows you to call content onto any page

Dynamically Load CMS Posts into Nuxt

• How to create a page template
• How to add links to your cms content to a page

Lab Time

• Work on Assignment 3