Netlify
Nuxt 3 Fundamentals
3 hours, 19 minutes
CC
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
CloseWhat They're Saying
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
noahh_ts
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
Table of Contents
Introduction
Section Duration: 6 minutes
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.
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
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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
Ben concludes the course by suggesting some additional Nuxt topics to explore including middleware, authentication, and unique modules like nuxt-content and nuxt-img.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops