ashx3s

Netlify CMS Widgit Configuration

Backend

• Set this to:

backend:
  name: git-gateway
  branch: main

• This is telling netlify how to access the content and from which branch.

ashx3s

Nuxt Content

Nuxt Content and Netlify CMS integrate very smoothly. Follow up with this documentation for detailed directions

ashx3s

Netlify Configuration

After you have set added your nuxt page to netlify, you will need to enable Identity & Git Gateway

Enable Identity

1. Got Netlify Dashboard
2. Settings -> Identity
   • Enable identity service
   • Select invite only
3. External provider (optional)

ashx3s

Vue V-Bind Directive

• v-bind is used to:
  • Bind values to Attributes
  • Pass values to child components

Bind values to attributes (href, class, src...)

- You can use the full syntax like:
```
<a v-bind:href="link">{{ link-text }}</a>

ashx3s

Netlify Setup

These instructions are for configuring your website from netlify.

Prep

• Have already set up nuxt and added an admin index.html and config.yml
• Add the Netlify identity widget to your pages/index.vue file if you already havent

export default {
  head() {
 return {

ashx3s

Fix NPM Vulnerabilities

Fixing npm security vulnerabilities can be daunting but isn't too difficult. These steps should get you through most fixes. This process will work for both npm and yarn setups (just change the commands).

1. Perform an audit to figure out what packages are causing the vulnerabilities

npm audit

• The audit will show the affected packages.

ashx3s

Nuxt Content Render CMS Content

• Review this documentation

Render your blog articles dynamically

To actually render your pages, you will create a slug file that is used to render all the content.

• Create a pages/_slug.vue file
  • This will be used to create the template

Script Tag

ashx3s

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

ashx3s

Netlify CMS Collection Yaml

Using YAML, you are able to customize a workflow for content editors using the cms.

While this is a very powerful system, there are some limitations to watch out for.

Keep in mind that this is replacing the use of a database for the purposes of structuring data. So it does need to be very specific by necessity.

Important Details

• YAML is whitespace sensitive, indentation matters for correct code rendering

ashx3s

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/