Tutorial 04 - Vue.js 3

[braughtg]

Tutorial 04 - Vue.js 3

In this tutorial you will use what you have learned to build a functional version of the FlashWord application. When that is working you'll learn about the Vite (pronounced "veet") build system.

Getting Started

You will start and work on this tutorial in the same way as you have for the previous tutorials. You should be starting to internalize this process making you less reliant on reading the detailed instructions each time.

Tasks

1. If you don't remember all of the steps for getting started and working on the tutorial tasks, you should review the relevant parts of the worflow using the links in the "QuickReference" document as necessary.
2. Open Susan Buck's Vue.js Simplified Course.

Building FlashWord

Tasks

1. Watch and follow along with the "Building FlashWord" video (11:54).
   • Notes:
     • Susan's notes for this video contain all of the code to be copy and pasted so that you don't have to type it all.
     • If you do not see expected updates when you reload the FlashWords page after making a change:
       • Try holding Shift while reloading or use the keyboard shortcut (see the QuickReference).
       • Check the Developer Tools console for errors.
     • You may notice that sometimes the word cards will change order when you first type in the text input. This is due to a bug in the way Susan implemented the app. You'll figure out a fix for that bug in the extensions to this tutorial.

Self Check

1. What bits of code cause the text input to change to plain text when the correct answer is entered?
2. What bits of code cause the card to turn green when the correct answer is entered? How do they work together?
3. What bits of code cause the "completed" message to appear? How do they work together?

Note: If you are unsure about these questions, they are the type of thing that the Copilot Ask agent might be able to help you better understand.

Introduction to Vite Build System & NPM Package Manager

Build systems like Vite are used to package a web application and all of its dependencies so that it can be served efficiently over the Web and without relying on an external Content Delivery Network (CDN).

Tasks

1. Watch the first 5:20 of the "Vite Build System" video.
2. You can watch the remainder of the video for context if you like, but there is no harm in skipping it.
   • If you do watch it do not follow along with the things that Susan does. The Vite build system has evolved since Susan made her videos and our installation will be slightly different that what she does.

Self Check

1. What is "npm" and what is its purpose in a project
2. What is "Vite" and what are the advantages of using it?

Installing Vite

The tasks in this section will walk you through the installation of Vite. All the tasks are to be completed within your Codespace.

Tasks

1. In a Terminal in your Codesapce, change into the web-projects` directory.
2. Run the command npm create vite@3 to create a new Vite project and use the following responses to the prompts:
   • Project name: flashword-vite
   • Select a framework: Vue
   • Select a variant: JavaScript
3. Use the commands as instructed by Vite in the Terminal.
   • Notes:
     • The npm install command used NPM to install all of the project dependencies (e.g. Vue.js).
     • The npm run dev command starts a Vite development server to display the flashword-vite app and provide the hot module reloading feature.
4. You will see some output in the Terminal indicating that Vite is running.
5. Open the "Ports" tab.
6. Open the "Vite (5173)" port to connect to the Vite development server and display the flashword-vite app.
7. You should see the following starter application in the Vite development server:
   . .
8. Move the browser tab containing the Vite development server to a separate browser window so that you can see both your Codespace and the server.

Self Check

1. What command do you use to run the Vite development server?
2. How do you view the app that is being served by the Vite development server?
3. In which directory do you run the command to start the development server?

Hot Module Reloading

Hot module reloading (HMR) is one of the key features of the the Vite development server and helps to improve the development experience.

Tasks

1. Restart the "Vite Build System" video at 10:08 and follow along until the end.
   • Notes: The starter application that you see is slightly different than Susan's because we are using newer versions of Vite and Vue.js. However, it is close enough that you should be able to adapt what she does and follow along.

Self Check

1. What is hot module reloading? What triggers a module reload?
2. How do you stop the Vite development server?
3. How do you restart the Vite development server?

Working with Vite and Vue

In this section you'll learn more about Vite and Vue applications by converting the FlashWord app into a more modern looking Vue.js application built by Vite.

Tasks

1. Watch and follow along with the "Working with Vite and Vue" video (20:49).
   • Notes:
     • Again, there will be some small differences between your files and those shown by Susan due to different versions of Vite and Vue.js. Most things will be straight forward to adapt.
     • An issue in App.js will cause the code to fail the pre-commit lint checks until it is fixed. The tasks below will help you to fix it.
2. The linting tools in the project have caught a bug in Susan's implementation. The error is contained in the following bit of code:
   . .
3. Hover over the underlined command or review the "Problems" tab at the bottom of the screen to find the error message.
4. Use Copilot's Ask agent to understand what this error is and to come up with a way to fix it.

Self Check

1. What is the package.json file?
2. What is contained in the node_modules directory and where does it come from?
3. What is a Single File Component (SFC) in Vue?
4. Are we using the Composition API or the Options API for our Vue.js code?
5. Why was the line this.words.sort(() => 0.5 - Math.random() flagged by the linter? Why did the fix you found work?

Turning in Your Work

Once you have finished all of the work in this tutorial you will need to officially submit it.

Task

1. Use the steps for "Completing a Tutorial" to submit your work. You should be starting to internalize this process making you less reliant on reading the detailed instructions each time.

---

This Tutorial is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License