Introduction to Vue 3
Table of Contents
Course Resources & SetupSarah gives an overview of the course slides, the course repository, the various chrome extensions used for the course, and how to get set up with CodePen to follow along with the course.
Vue 3 Hello WorldSarah creates a new Vue.js instance that returns the "Hello World" message, and demonstrates that using the Vue framework allows engineers to write clean, legible, easy to maintain, and reactive code.
Directives, Modifiers & Data Rendering
v-model DirectiveSarah explains that the V-model directive creates a relationship between the data in the component and a form input that allows the engineer to dynamically update values. A directive is a special token in the markup that tells the library to modify a DOM element. A Vue directive appears in the format of a prefixed HTML attribute. How to implement the v-model directive is also discussed in this segment.
v-if & v-elseSarah defines v-if as a conditional directive that displays information depending on meeting a requirement. A requirement can be the filling of a text area which in return makes a button appear. This section also covers how to use v-if and v-else together.
v-bindSarah defines v-bind as a directive that can be used for style binding, class binding, or for creating dynamic props, and why v-bind is one of the most useful directives.
v-forSarah defines v-for as a directive that loops through a set of values or that can also be a static number, and walks through a v-for example that contains a value, a key, and an index.
v-once & v-preSarah defines v-once as a directive that no longer updates an object once it has been rendered, and v-pre as a directive that prints out inner text and is useful when writing documentation. How to use the v-once and v-pre directives by embedding them in an HTML file is demonstrated in this segment.
Event Bindings & v-onSarah defines the v-on or @ directive as a binder to events like click and mouseenter, and demonstrates how to embed the directive in an HTML file through an example.
v-html & v-textSarah defines v-html as a directive used for strings that have html elements that need to be rendered, explains that it is best practice to avoid the use of the v-html directive to render data on a page, and adds that v-text is a directive that is similar to using moustache templates, or templates without a control flow.
Directives ExerciseStudents are instructed to use directives to build a calculator, and add a select dropdown that conditionally renders data into a page.
Directives SolutionSarah walks the students through the solution to the Directives exercise, and answers questions about the use of the v-lazy directive, when to specify a type, and about the uniqueness and type of a key when used in a DOM.
v-model ModifiersSarah explains that the v-model.trim modifier strips any leading or trailing whitespace from the string that a component is bound to, adds that the v-model.number modifier changes strings to number inputs, making sure the inputs are the right type, and v-model.lazy does not populate content automatically, and listens to change events instead of input.
Event ModifiersSarah gives an overview of the main event modifiers, @mousemove.stop, @mousemove.prevent, @submit.prevent, and @click.once, and explains that the new HTML spec in Vue switched to the use of names instead of numbers for keycodes.
Methods, Computed Properties & Watchers
MethodsSarah explains that methods are functions that are bound to a Vue instance which allow connecting functionality to directives and allow engineers to access functions through directives, and walks students through a comment form that uses methods.
Methods in FormsSarah demonstrates how to create a form that uses a method called submitForm that posts to a server.
Sorting Table Data with v-forSarah covers another usecase involving methods that uses data from a Netflix API and lists movies from highest to lowest and from lowest to highest using two different methods, "sortLowest" and "sortHighest".
Computed PropertiesSarah defines computed properties as calculations that are cached and only update when needed, when the initial data value changes, and covers the main differences between computed properties and methods.
Computed Properties ExerciseStudents are instructed to build a form that allows users to create a blog post using a title, an author, and a label, and also allows filtering the list of blog posts using a label.
Computed Properties SolutionSarah live codes the solution to the Computed Properties exercise, and shares another example that uses computed properties to render data.
Computed Properties ExamplesSarah covers a few examples using computed properties such as adding currency signs, filtering a large amount of data based on user input, and creating data visualizations that can be explored. This section also mentions why filters have been deprecated from Vue 2 to Vue 3, and why it is best practice with Vue 3 to use computed properties and methods.
Vue's Reactivity System & ProxiesSarah explains that reactive programming is programming with asynchronous data streams, adds that a stream is a sequence of ongoing events ordered in time that offer some hooks with which to observe it, and walks through the various steps that Vue 3 goes through to make an object reactive. Proxies, which are objects that encase other objects or functions that allow engineers to intercept it, are also explored in this section.
Set(), Map() & WeakMap()Sarah defines Set(), as a method that takes in a series of values, comparable to an array, where any particular value can only be inserted once, and explains that Map() is a method that also takes a series of keys and values, similar to an object, but remembers the order and performs better in scenarios involving frequent addtion or removal of data. WeakMap() is defined as a method that is similar to Map() but with weaker references. In other words, when an element of the WeakMap() is deleted, the reference can be garbage collected.
WatchersSarah explains that watchers are objects that are good for asynchronous updates and transitions involving data changes, and explains that watchers give access to both the new value and the old value of an element. Changing datasets using watchers is also discussed in this segment.
Watchers ExerciseStudents are instructed to use a watcher to modify the value of a given method.
Watchers SolutionSarah walks through the code of the solution to the Watchers exercise.
Watchers ExampleSarah explores one more example using watchers that changes animations when the timezone is modified. A question about how watchers affect properties within a method is asked.
Components & Props
ComponentsSarah defines components as a collection of elements that are encapsulated into a group that can be accessed through one single element. How to build a component and modify a child component is demonstrated in this segment.
PropsSarah explores the use of props by refactoring the example from the previous segment so that with every child component, a prop is returned, and explains that props pass data from a parent to a child component to ensure that there is only one source of truth.
Components in PracticeSarah explains that each component instance has its own isolated scope, therefore data must be linked to a component through a function. How to add a component to a given template is also demonstrated in this segment.
Component Events with emitSarah explains that, to guarantee that there is only one source of truth, a prop is not mutated when it is defined within a child component, but the modification is communicated to the parent component through an $emit() function. An example of a child component reporting a change to the parent component is discussed in this segment.
SlotsSarah explains how slot elements allow for the possibility of passing content into a component with ease. A few examples are covered where components utilize slots to create dynamic content. Slots are elements that allow users to populate content.
Components ExerciseStudents are instructed to refactor code into components, and add slots to each components.
Components SolutionSarah walks through the code for the solution to the Components exercise.
Single File TemplatesSarah describes how to write a single file template in Vue, and adds that a single file template means no context-shifting.
Vue CLISarah demonstrates how to install the Vue CLI, explains how to start a new Vue project from the CLI, and refactors code from a previous CodePen into a Vue application.
Creating & Deploying a Vue.js AppSarah refactors code from the backpack shop counter component example viewed in the previous section from CodePen into a Vue application, demonstrates how to push the code up to GitHub, and how to link GitHub to Netlify in order to deploy code using Netlify.
Visual Studio Code Snippets & HighlightingSarah explains that it is best practice to use snippets in editors that are specific to Vue to be able to read and visualize code better, and describes the Vetur extension which provides highlighting, snippets, and formatting to Vue in VSCode.
Lifecycle HooksSarah gives a survey of lifecycle hooks or methods that can be used in Vue.js, shares the lifecycle methods that changed from Vue 2 to Vue 3, and introduces the new lifecycle methods available in Vue 3.
NuxtSarah introduces Nuxt, explains her preference for Nuxt over Vue CLI to deploy code to production. Nuxt is a progressive framework based on Vue. Nuxt guarantees automatic code splitting, allows server-side rendering, has a powerful routing system with asynchronous data,offers automatic dynamic routes, and offers lighthouse scores. When loading a library, Nuxt only uses the methods that are necessary.
Nuxt SetupSarah demonstrates setup and startup for a Nuxt project, walks students through the nuxt.config.js file, and explains how Nuxt.js and Vuex function together.
Rendering in NuxtSarah demonstrates how to render CSS in Nuxt, reminds the students that Nuxt renders server-side, and explains what hydration is. Hydration improves the performance of an application by speeding up performance to initially serve raw HTML and CSS, because it renders an application statically by rendering it server-side. After the static part has been served, Vue takes over the dynamic part of the application.
Vue CLI ExerciseStudents are instructed to go through the solution code from the Components solution, and refactor the code to contain all the setups necessary for Vue CLI.
Vue CLI SolutionSarah walks the students through the Vue CLI solution.
AnimationsSarah explains that there are a myriad of different ways to work with animations in Vue, mentions the use of surface API pieces which are parts of an API a user can interact with, and walks students through the use of transitions when creating animations. How to reuse transitions in different components is also discussed in this section.
CSS AnimationsSarah explores using CSS classes when using the transition component, mentions custom eases and how to include them when using animations, and explores using only a class to create an animation.
Animation PracticeStudents are instructed to create either a transition or an animation that addresses the entrance or exit to an element. There are no solutions to this practice because transitions and animations vary from one student to another.
Transition ModesSarah explains that transition modes are borrowed by Vue from React, and explores the different transition modes available to developers in Vue. Transition modes allow engineers to build animations that are not simultaneous entering and leaving transitions, for example, the in-out transition the new element transitions in first, and when complete, the current element transitions out.
Animated InteractionSarah demonstrates through an example of an animated Wall-E how to loop through events and add animated interaction in Vue.js. How to coordinate scrolling with animation are also discussed in this segment.
Nuxt Page TransitionsSarah reviews the enter and leave states that allow users to transition from one page to another, explains that Nuxt has the necessary hooks that can create transitions between pages, and walks students through how to add animations to one specific page using Nuxt.
Nuxt Page Transitions PracticeStudents are instructed to use Nuxt to create two pages, or to use the setup2 folder in the repository, and to set up a page transition.
Composition API & Custom Directives
Composition APISarah explains how the composition API allows engineers to encapsulate one piece of functionality so that the functionality can be used in different components throughout the application. The composition API follows a functional programming model that takes small pieces of functionality and allows developers to use it in different components throughout the application. Refactoring code using composition API is also discussed in this segment.
Computed Properties, Watch & WatchEffectSarah explains that computed properties take in a state and return a computed state, adds that the Watch method allows engineers to access the new and old values, and defines WatchEffect method as watchers with small differences. WatchEffect executes a function immediately, and tracks all the reactive state properties it used during the execution as dependencies.
Props & ContextSarah explains that props in the context of the composition API are reactive and are passed into setup, and adds that context is passed as the second argument in setup, which allows the engineer to access events like emit.
Lifecycle Hooks & UsecasesSarah explains that lifecycle hooks are named the same as other hooks, but are prefixed with "on" and camelCased when declared and used in the composition API. The composition API is useful when trying to extract reusable logic without a template such as getting dimensions of the viewport and component, gathering specific mousemove events, base elements of charts, clipboards, media queries, and dark mode. How to merge the options API (the former Vue API) and the composition API is also discussed in this segment.
Script Setup & Composition ResourcesSarah demonstrates how to implement the script setup element instead of a script function in single file components, and shares additional resources to further one's knowledge about the composition API.
Composition ExerciseStudents are instructed to refactor a given the example of the comment form introduced in the methods segment, using the composition API.
Composition SolutionSarah walks students through the solution to the Composition exercise.
Custom DirectivesSarah explains that it is possible for engineers to create their own custom directives, and walks students through already existing directives.
VuexSarah defines the Vuex library as a centralized store for shared data, logic, shared oe asynchronous methods, explains that engineers use Vuex when multiple of instances of children and siblings communicating, or when it is necessary to see what all of the states look like and keep states in an organized place. State, actions, and getters in Vuex are also discussed in this segment.
commit & emitSarah describes how to use state, getters, mutations, and actions within components. How to use the spread operator to refactor code that uses state, getters, mutations, and actions is also discussed.
Vuex ExerciseStudents are instructed to create an application using the Vue CLI, and add store logic through Vuex that applies to components.
Vuex SolutionSarah walks students through the solution to the Vuex exercise.
Wrapping UpSarah congratulates students for finishting the course, and shares resources for students to further their knowledge in Vuex, after walking students through one last example, a weather notifier that uses a Vuex store to show the weather, and mutates the state of the weather. The Netlify e-commerce repository that contains other examples of using Vuex store is also discussed in this segment.