NuxtJS Framework

Group Assignment

• Link to assignment instructions
• Due: Friday March 22

Warmup Activity: 30 minutes

In your new teams, implement a feature where individual array items are able to be passed between two arrays.

• Use this codepen from yesterday as a base
• Then implement your solution in our shopping codepen from yesterday
• Use your own codepens if you’ve already been working on this, but the ones linked here are for reference and in case you want to reset your work quickly

Intro to Nuxt

• NuxtJS is a frontend framework that uses VueJS
• It can be used to create:
  • Server Side Rendered (SSR) Pages
    • backend server sends data to frontend page (traditional page)
  • Static Site Generation (SSG)
    • Web page content is built and then hosted statically
  • Progressive Web Apps
    • A client side rendered web application

NuxtJS Resources

• Offical Docs
• Modules
• Free Code Camp Nuxt 3 Tutorial

Nuxt Setup

• Use the create nuxt-app command as noted on the documentation
  • npm, npx, and yarn are all good options
  • Create Nuxt App Docs
• Going through the prompt:
  • Make sure to press space to select options
  • Follow Ash’s guide
  • If you use Nuxt with Strapi, select axios instead of content during setup

Nuxt Tour Gists

• Nuxt Project Structure
• Nuxt Navigation
• Nuxt Pages

Creating Pages with Nuxt

• You can create web pages in your pages/ folder, the nuxt router will generate your the routes for you

Using Vue in Nuxt

• Nuxt is a framework built around vue, so all valid vue code is valid nuxt code.

Layouts

• One thing that nuxt offers is a convenient way to set up default layouts
  • This allows you to have multiple complete layouts within which to add your page content
    • Use layouts for things like:
      • Nav
      • Header
      • Footer
      • <Nuxt />
      • side bars
      • A group of pages with a local nav (for posts)
  • the namespace default.vue does not need to be registered
  • if you create a default.vue layout, it will be automatically applied to all pages unless they are specified to do otherwise

Activity: Create 2 different layouts (15min)

• 1 default layout
• 1 layout that includes content different from the default (could be for a gallery, contact page, page with a local navigation)

Vue and Nuxt Routers

• Vue Router: Documentation
• Nuxt Router: Documentation
• Nuxt and vue have excellent routers that build your routes for you.
• You can access the router by using this.$router syntax in your scripts

Activity: console log your route information

• In the script tags on each page, console.log the route
• Experiment changing the names of different pages in your pages/ folder
  • See how your routes change