Building Applications with Vue & Nuxt
Learning Paths:
Topics:
Table of Contents
Introduction
Introduction
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.
Working with SVG Graphics in Vue
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
Project Setup
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.
Adding Styling & SVG Graphics
Sarah adds styling, a custom font, and an SVG graphic to the application. A JSON object containing questions is moved to the Vuex store.
Adding Application UI State
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.
Using Mutations
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.
Creating a Question Index
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.
Updating the Question Index in the Store
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.
Creating a Watcher
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.
Adding a Score & Shuffling Answers
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.
Adding a Result Modal Exercise
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.
Adding a Result Modal Solution
Sarah walks through the solution for the Adding a Result Modal exercise.
Building a Food App with Nuxt
Nuxt Overview
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.
Creating a Nuxt App
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.
Set Up Nuxt Config
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.
Create Pages & Navigation
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.
Create a Masthead
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.
Create a Grid from Store Data
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.
Create a Footer & Restaurant Page Exercise
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.
Create a Footer & Restaurant Page Solution
Sarah walks through the solution to the Create a Footer & Restaurant Page exercise.
Fetch API Data with a Plugin
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.
Deploy the App
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
Create a Filtering Component
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.
Filtering with Computed Properties
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.
Create a Dynamic Page
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.
Dynamic Page Exercise
Students are instructed to populate the dynamic page with the data from the computed property and add style to the displayed information.
Dynamic Page Solution
Sarah walks through the solution to the Dynamic Page exercise.
Create a Reusable Component with Slots
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
Using Vuex Store Mutations and UUID
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.
Add Icon with Conditional Layout
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.
Vuex Store Shopping Cart
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.
Shopping Cart Count Exercise and Q&A
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.
Shopping Cart Count Solution
Sarah walks through the solution to the Shopping Cart Count exercise.
Forms & Composition API
Form Validation in Vuelidate
Sarah uses the Vuelidate library to add form validation to the restaurant application and shares other common Vuelidate use cases.
Stripe Payments Practice & Resources
Sarah provides resources and an example project that demonstrate how to add Stripe payments to the application.
Composition API
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.
Adding Composition API to Nuxt
Sarah demonstrates how the Composition API can be added to a Nuxt application, and explains the defineComponent, ref, and watchEffect modules.
Composition API Exercise
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.
Composition API Solution
Sarah walks through the solution to the Composition API exercise.
