Nuxt 3 Fundamentals

Ben Hong

Ben Hong

Netlify
3 hours, 19 minutes CC
Nuxt 3 Fundamentals

Course Description

Nuxt is a robust full-stack framework to build fully static and dynamic apps with Vue. Learn to create Nuxt projects from scratch, deploy a Nuxt app in production, and be comfortable exploring Nuxt's vast ecosystem of plugins and tools!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: October 17, 2022

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 6 minutes
  • Introduction
    Ben Hong begins Nuxt 3 Fundamentals by outlining the course format and sharing some tips for creating the most effective learning experience. Students are encouraged to complete all the exercises in the course to reinforce the learning objectives through repetition and practice.
  • Course Setup
    Ben shares the course prerequisites and lists the recommended VSCode extensions and browser tools. Basic skills with the terminal and Git are recommended, along with a solid foundation in HTML, CSS, and JavaScript. Basic knowledge of Vue 3 is also encouraged.

Nuxt Fundamentals

Section Duration: 1 hour, 8 minutes
  • Nuxt CLI Starter Project
    Ben uses the nuxi NPM package to scaffold a new Nuxt 3 project. The generated project includes a basic Vue component and Nuxt configuration file. The project also comes preconfigured for TypeScript; however, using TypeScript is not required.
  • Options API
    Ben uses the Options API to create a Vue component that fetches a list of todos from a web service and displays them using an unordered list. A public directory is also created to serve static assets without requiring a compilation step.
  • Options API Exercise
    Students are instructed to create a photo gallery component that returns a list of photos from a remote API when a button is clicked. To begin the exercise, check out the 01-exercise branch. The solution can be found on the 01-finish branch.
  • Composition API
    Ben refactors the photo gallery to use the Composition API to highlight the differences with the Options API. The ref and reactive helper methods are also compared in this lesson.
  • Composition API Exercise
    Students are instructed to refactor the todo component code inside app.vue to utilize the Composition API syntax. To begin the exercise, check out the 02-exercise branch. The solution can be found on the 02-finish branch.
  • CSS Styling
    Ben demonstrates how to style a single file component. CSS styles are treated as global styles, so to avoid naming conflicts, the scoped attribute can be added to the style block to limit the styles to that component. Binding to styles is also demonstrated in this lesson.
  • Styling with SCSS & Bulma
    Ben uses SCSS to style a component. The language attribute is added to the style block to let the compiler know how to transform the styles. The Bulma CSS library is also imported and applied to the component.
  • CSS Styling Exercise
    Students are instructed to style the photo gallery so the photos are displayed across a number of columns. To begin the exercise, check out the 03-exercise branch. The solution can be found on the 03-finish branch.

Components

Section Duration: 48 minutes
  • Creating Components
    Ben refactors the Todo and Photo Gallery components into separate component files. Each component is then imported into the main application. Custom CSS and Bulma imports are also moved to the main application.
  • Using Slots
    Ben introduces slots and demonstrates how they allow parent components to pass content into a child component. When multiple slots are defined within a component, they can be given names and explicitly targeted using a template tag. Slot-specific props are also discussed in this lesson.
  • Components & Slots Exercise
    Students are instructed to refactor the PhotoGallery and TodoViewer components to use a base component and have the content passed in through a slot. To begin the exercise, check out the 04-exercise branch. The solution can be found on the 04-finish branch.
  • Auto-Imports & Global Components
    Ben demonstrates that Nuxt 3 will automatically import any component used within the application. The Nuxt compiler will only import and bundle what is explicitly used in the application. If a component is used throughout the entire application, it can be defined in a global folder.

Routing & Fetching Data

Section Duration: 48 minutes
  • Routing with NuxtPage
    Ben explains the NuxtPage component behaves like a slot. The current page component will appear wherever the NuxtPage component resides within the application. By default, NuxtPage will render any component in the pages directory matching URL.
  • Routing Exercise
    Students are instructed to create routes for the PhotoGallery and TodoViewer components. To begin the exercise, check out the 05-exercise branch. The solution can be found on the 05-finish branch.
  • Composables
    Ben introduces composables and compares them with hooks in React. The useRoute composable gives the component access to URL details like the path or query params.
  • Query Params
    Ben creates a reactive property to filter the to-do list based on a query parameter passed in the URL. A the differences between the onMounted and onCreated lifecycle methods are also discussed in this lesson.
  • Photo Gallery Exercise
    Students are instructed to filter the photo gallery based on query parameters. For example, only display photos with an even albumID when even=true is passed. To begin the exercise, check out the 06-exercise branch. The solution can be found on the 06-finish branch.
  • Dynamic Routes
    Ben demonstrates how to create a dynamic route by creating a subfolder in the pages directory and wrapping the filename in square brackets. Nuxt will automatically expose a parameter with the same name on the params object provided by useRoute
  • Dynamic Routes Exercise
    Students are instructed to create a dynamic route to display an individual photo when one is clicked on in the photo gallery. To begin the exercise, check out the 07-exercise branch. The solution can be found on the 07-finish branch.

Layouts & Metadata

Section Duration: 21 minutes
  • Layouts
    Ben introduces layouts and demonstrates how they customize the way page content is displayed in different areas of the application. Nuxt will look in the layouts directory for a file matching the current route. If no file matches, the default.vue layout file will be used.
  • Layouts Exercise
    Students are instructed to add a custom layout for the todo route. To begin this exercise, check out the 08-exercise branch. The solution can be found on the 08-finish branch.
  • Page Metadata & Resources
    Ben demonstrates how page metadata can be configured directly in a component by utilizing Nuxt components which mirror HTML elements like Head, Link, and Title. This allows custom resources to be imported on specific pages and metadata like the page title to be overridden by subroutes.
  • Page Metadata & Resources Exercise
    Students are instructed to import a custom font from Google Fonts using the Nuxt metadata components. To begin this exercise, check out the 09-exercise branch. The solution can be found on the 09-finish branch.
  • Fetching Data from an API
    Ben demonstrates how Nuxt abstracts remote API requests so that they can be executed from both client-rendered and server-rendered applications. The useAsyncData and useFetch composables carry out the requests and make the data available to the application. Lazy fetch requests are also discussed in this lesson.

Wrapping Up

Section Duration: 6 minutes
I just completed "Nuxt 3 Fundamentals" by Ben Hong on Frontend Masters! Nuxt is great, think i'm gonna have to go build personal site/blog/portfolio with Nuxt.
noah

noah

noahh_ts

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now