ashx3s

Nuxt Pages Setup

• See the vue documentation

All .vue files in the pages directory are atomatically given routes. This makes setting up a navigation quick and easy.

Dynamic Pages

Dynamic pages are automatically generated. A great example are blog posts created using a CMS. You will use _slug.vue in the pages/ directory to access this type of content that is generated by an API.

• Use an asynchronous function with params to get information from the api:

<template>

ashx3s

Navigation in Nuxt

• Read NuxtJS router documentation Nuxt automatically creates routes out of all you .vue files in the pages/ directory. It uses NuxtLink syntax for all the pages in this directory (local links). For external links, use the traditional a href syntax.

Example

<template>
<nav>
  <ul>
 Home

ashx3s

Strapi Nuxt Manual Setup

This is recommended if you want to have more direct control of your setup. However using the yarn create strapi-starter will automate this process

Initial Setup

1. Create a project directory and initialize it as a git repo

• Add a top level package.json. This will be used to connect the frontend and backend to one another

{
"name": "simple-blog",

ashx3s

Strapi Install

This will outline how to set up a Strapi install on localhost.

Directions

1. Set correct node version (currently strapi is at v14)
2. Install using npm or yarn

• npx create-strapi-app project-name --quickstart

3. Create an administrator user

• You will get an admin panel after the script installs strapi

ashx3s

Strapi Content Type Setup

ashx3s

Vue Directives

VueJS provides a number of directives that are great for dynamically generating a website. But they can be tricky to get the hang of. This gist demonstrates how to use these effectively in your code

v-text

• Used to update an elements textContent with data

v-html

• Renders html, not just text
• Used to generate html into your template

ashx3s

Vue Component Structure

• In a vue component, you write your content into the template, add css to the styles, and declare your data, props, methods, etc into the script tag. You will also import other files into the script tag
• Your vue components should be capitalized. components/Header.vue
• but your layouts should be lowercase layouts/default.vue
• This is an example of how a vue file is set up

<template>

<!-- HTML, compononents, vue directives here -->

ashx3s

Add Strapi Content to Nuxt

Use graphql to make queries from the backend.

Prep

• Backend should be set up with content added to it.
• Use Apollo to write graphql queries
• Nuxt should be set up and able to access the backend

Steps

ashx3s

‎‎​

ashx3s

Netlify CMS Setup

Everything in this gist is taken from netlify's docs on setting up nuxt with netlify cms. This is an abbreviated version. I recommend reading through the docs page as well.

• In the static/ directory of your nuxt install, add a folder called admin/
• inside admin create 2 files
  • index.html
  • config.yml

Index.html (Admin UI Page)