Google
Building Applications with Vue & Nuxt
4 hours, 14 minutes
CC
Course Description
Build dynamic web applications with Vue and Nuxt! Throughout the course you’ll build out a variety of projects leveraging the tools in the Vue ecosystem including the Vue CLI, Nuxt, Vuex Store, and more. You’ll make dynamic pages and routes, bring in dynamic data and filter it within a grid, and effectively work with watchers to change UI based on state. Then, at the end of the course, you’ll work with the Vue composition API – a new feature built into Vue 3!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn 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: 16 minutes
Sarah Drasner, the V.P. of Developer Experience Engineering at Netlify and a Vue Core Team member, introduces the game and food applications built throughout the course.The Github repository has links to the slides, exercises, solutions, and other tools and resources helpful for developing Vue applications.
Sarah introduces the alienzombie game. The SVG graphics used in the game were extracted from an Adobe Illustrator file and built into Vue components.
Building a Quiz Game App
Section Duration: 1 hour, 5 minutes
Sarah creates the Vue project for the alienzombie game and walks through the project resources. The resources folder contains all the styles and image assets needed to build the game.
Sarah adds styling, a custom font, and an SVG graphic to the application. A JSON object containing questions is moved to the Vuex store.
Sarah creates a game start screen that only appears if the uiState property in the Vuex Store is equal to "start". The concept of slots and how to inject content into a slot is also discussed in this segment.
Sarah demonstrates how to use mutations to send application state changes to the store that update the UI, and uses the ":is" directive to bind a component to the selected character.
Sarah creates a question index to populate the questions and answers presented to the player. The answers are weighted based on the character selected on the start screen.
Sarah creates a pickQuestion method which commits the user's selected answer to the store. The application increments or decrements the score based on the user's selection, and advance to the next question.
Sarah builds a watcher to update the needle based on the user's score, and uses the Greensock animation library (GSAP) to animate the moving needle. Watchers are able to respond to changes in state, computed properties, and any type of dependency in the application.
Sarah adds two states, won and lost, which are triggered based on the score obtained after answering to the final question. The Fisher-Yates algorithm is used to shuffle each set of answers.
Students are instructed to add a result modal to the application that displays a different icon if a game is won or if a game is lost. The modal should also have a reset button to restart the game.
Sarah walks through the solution for the Adding a Result Modal exercise.
Building a Food App with Nuxt
Section Duration: 1 hour, 1 minute
Sarah introduces Nuxt, a framework based on Vue.js to create modern web applications, and describes features like automatic route generation, server-side rendering, and single page application compatibility. Nuxt also uses treeshaking, a feature which eliminates excess code and leads to a smaller application size.
Sarah creates the initial Nuxt project for the food application and walks through the folder structure. Configuration options are added to the nuxt.config.js file and each directory contains a README.md file with information about that directory's purpose.
Sarah begins editing the nuxt.config.js configuration file for the application. Custom fonts can be configured inside the head property, and stylesheets can be imported with the css property.
Sarah creates an "about" page and adds navigation to the application. Nuxt automatically creates a route for any component added to the pages directory. Routing links in a Nuxt application use a <nuxt-link> component rather than an <a> element.
Sarah creates a header area across the top of the index page and adds a hero image. The HTML and CSS code for the hero image is copied from a hero generator tool.
Sarah adds a list of restaurants to the index page. Each restaurant displays a grid of menu items. The menu items include a name, price, background image, and a button to view the item.
Students are instructed to create a footer using a <footer> tag and create a page named "restaurants" that includes the <AppRestaurantInfo> component. After the restaurants page is created, it should be added to the navigation menu.
Sarah walks through the solution to the Create a Footer & Restaurant Page exercise.
Sarah creates an action to asynchronously load the restaurant date from a remote API. An env file is added to store the AWS API key so it remains independent of the application code. Sarah also creates a plugin to call the getFood service so the request is handled on the server rather than on every page load.
Sarah creates a remote Github repository for the application. Sarah then deploys the remote repository to Netlify and configures the AWS environment variable.
Filtering Data & Adding Dynamic Pages
Section Duration: 42 minutes
Sarah creates a reusable component to filter the grid of restaurants based on the type of food selected. This component emits the changed property so the parent component can respond to the event.
Sarah filters the list of restaurants using a computed property. The computed property returns a subset of the food data from the API based on the selected cuisine in the filter component.
Sarah demonstrates how dynamic pages are created in Nuxt. The dynamic page accesses the URL parameters through the $route object, and filters the data based on the unique ID passed in the URL.
Students are instructed to populate the dynamic page with the data from the computed property and add style to the displayed information.
Sarah walks through the solution to the Dynamic Page exercise.
Sarah builds a toast component to alert the user when the cart is updated. A slot allows the toast notification's content to be dynamic based on what is added to the cart.
Vuex
Section Duration: 33 minutes
Sarah creates an addToCart mutation that will accept the form output from the restaurant page and update the state. Sarah also introduces the UUID library which can be used to create unique IDs in the application. These unique IDs help Vue and Nuxt differentiate between objects on dynamic pages or v-for loops.
Sarah uses an SVG graphic for the application logo and makes the logo more accessible by setting the "role" attribute to "presentation" so it will not be read by screen readers. A media query is added to hide the outer circle of the logo on smaller screens so the logo has less detail.
Sarah creates the shopping cart layout using an HTML table. The hard-coded values are replaced with dynamic data from the Vuex store and a getter is added to update the cart total so the value can be available anywhere in the application.
Students are instructed to use a getter to the count of the cart in the menu and, if the cart is empty, show an empty cart SVG graphics that is also accessible. Questions about how Nuxt generates the dynamic pages and how often Vuex resets the application store are answered in this segment.
Sarah walks through the solution to the Shopping Cart Count exercise.
Forms & Composition API
Section Duration: 31 minutes
Sarah uses the Vuelidate library to add form validation to the restaurant application and shares other common Vuelidate use cases.
Sarah provides resources and an example project that demonstrate how to add Stripe payments to the application.
Sarah explains that the Composition API is a library inspired by React hooks. The Composition API creates reusable components or logic which can be composed together.
Sarah demonstrates how the Composition API can be added to a Nuxt application, and explains the defineComponent, ref, and watchEffect modules.
Students are instructed to use the Composition API to display a list of items and create a method to display an alert when an item is clicked.
Sarah walks through the solution to the Composition API exercise.
Wrapping Up
Section Duration: 3 minutes
Sarah wraps up the course. Questions about why Composition API code is still written in TypeScript, and when to use the Composition API vs. Vuex are answered in this segment.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops