Nuxt 3 Fundamentals
Table of Contents
IntroductionBen 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.
Nuxt CLI Starter ProjectBen 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 APIBen 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 ExerciseStudents 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 APIBen 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 ExerciseStudents 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 StylingBen 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 & BulmaBen 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 ExerciseStudents 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.
Creating ComponentsBen 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 SlotsBen 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 ExerciseStudents 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 ComponentsBen 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 NuxtPageBen 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 ExerciseStudents 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.
ComposablesBen 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 ParamsBen 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 ExerciseStudents 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 RoutesBen 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 ExerciseStudents 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
LayoutsBen 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 ExerciseStudents 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 & ResourcesBen 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 ExerciseStudents 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 APIBen 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.