Table of Contents
Introduction
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
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
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
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
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.
