Day 18 - Intro to Nuxt 3

Intro to Nuxt

• Nuxt 3 is a frontend framework built around VueJS
  • It uses vue syntax but bundles a lot of features
    • Filesystem Routing
    • Auto Imported Components
    • Static Generation, Server Side Rendered, Single Page Application
    • Modules to Extend Functionality
    • It has the nitro h3 microserver built into it, so you can set up routing like you would with Node Express
• All Vue syntax is valid in Nuxt
  • However it’s built around and optimized for Vue 3 and composition api syntax
• Nuxt 3 is designed to be a 1 stop solution for web pages and applications
• It is also easy to deploy to services like Netlify, Vercel, or Github Pages
• Video: What is Nuxt? — this is the first video in the series linked in the next section.

NuxtJS Resources

• Official Documentation
• Nuxt Modules
• Getting Started Guide
• Nuxt 3 Youtube Tutorial Series

Nuxt Setup

• Follow Project Setup Guide
• Create a new project using this command: npx nuxi init nuxt-app (replace nuxt-app with the name of your app/site)
• Navigate to the new project directory and run npm install
• You’re good to go! spin up a dev server with npm run dev

File Structure Essentials

• nuxt.config.ts: add modules and set global defaults and settings here.
• app.vue: this is the main entrypoint to your page. It creates the default layout that your pages are injected into (you can move this file and rename it to layouts/default.vue in order to create other layouts if needed)
• pages/: create your web pages here (just like views/ in a Vue app). They will be auto imported without any extra setup
• components/: add components here, they will also auto import and be available anywhere in your app

Activity: Create a new page

• add a new page to your pages/ directory
• use lowercase naming conventions (unlike vanilla vue)
• Set up a vue single file component and render a some text
• Create a link to the page using the following syntax on your pages/index.vue page:
  • <NuxtLink to=/page-name">Page Name</NuxtLink>
• Navigate to the page in a dev server

Adding Modules

• Google Fonts Module
• Tailwind Module
• Lodash
• Strapi

Activity: Add Tailwind following the documentation linked above

• Install the module
• Add it to the nuxt config file
• Test out some utility classes

Let’s Create Components!

• Just like in vue, create your components in your components directory, but now you don’t need to import them individually!

Demonstration/Activity

• Recreate the 3 card layout on Smashing Magazine’s Homepage
• Topics
  • Reusable Custom Card Component
  • List Rendering with v-for
  • <NuxtLink> built in component
  • Tailwind for quick styling

Breakouts Activities

We will pause throughout building for people to follow along with these tasks

1. Set up your card component
   • Create a components/AppCard.vue file and add minimal content
   • Add the card to your pages/index.vue page
   • Make sure you can see it using the dev server
2. Create Props and Add Default Placeholder Content
   • Content Props (text)
   • Set up html to render default values
3. Add your Card Data to the index.vue page
   • Create an array of 3 objects
   • Add these keys + values for each:
     • title
     • description
     • buttonUrl
     • buttonText
   • These should match your props
4. Loop through and render your cards
   • v-for loop
   • v-bind prop values
5. Add Color Props and Class Bindings
   • Add a color and bgColor prop in the component
   • Set up class bindings on the relevant tags
   • Add the values to each card (green, orange, purple)
   • Bind the colors to the component on the index.vue page

Lab Time

• 1:1 Sessions
• Check out some Tutorials