Building Applications with Vue & Nuxt
Table of Contents
IntroductionSarah 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 VueSarah 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 SetupSarah 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 GraphicsSarah 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 StateSarah 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 MutationsSarah 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 IndexSarah 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 StoreSarah 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 WatcherSarah 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 AnswersSarah 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 ExerciseStudents 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 SolutionSarah walks through the solution for the Adding a Result Modal exercise.
Building a Food App with Nuxt
Nuxt OverviewSarah 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 AppSarah 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 ConfigSarah 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 & NavigationSarah 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 MastheadSarah 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 DataSarah 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 ExerciseStudents 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 SolutionSarah walks through the solution to the Create a Footer & Restaurant Page exercise.
Fetch API Data with a PluginSarah 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 AppSarah 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 ComponentSarah 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 PropertiesSarah 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 PageSarah 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 ExerciseStudents are instructed to populate the dynamic page with the data from the computed property and add style to the displayed information.
Dynamic Page SolutionSarah walks through the solution to the Dynamic Page exercise.
Create a Reusable Component with SlotsSarah 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.
Using Vuex Store Mutations and UUIDSarah 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 LayoutSarah 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 CartSarah 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&AStudents 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 SolutionSarah walks through the solution to the Shopping Cart Count exercise.
Forms & Composition API
Form Validation in VuelidateSarah uses the Vuelidate library to add form validation to the restaurant application and shares other common Vuelidate use cases.
Stripe Payments Practice & ResourcesSarah provides resources and an example project that demonstrate how to add Stripe payments to the application.
Composition APISarah 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 NuxtSarah demonstrates how the Composition API can be added to a Nuxt application, and explains the defineComponent, ref, and watchEffect modules.
Composition API ExerciseStudents 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 SolutionSarah walks through the solution to the Composition API exercise.