Table of Contents
Introduction
Overview
Vue Overview
Ben discusses an overview of what Vue is and why to consider using Vue, including Vue being approachable, performant, versatile, community-first, and enterprise proven. A brief demonstration of some applications that use Vue is also included in this segment.Creating a Vue App
Ben briefly discusses prerequisite knowledge for creating a Vue app and walks through how to create a base Vue application without using any build tools. Vue is being used directly from a CDN by placing a script tag into the HTML and can be configured via a defined configuration object.Directives
Ben demonstrates using unique attributes with the v- prefix called directives, including v-if, v-else, and v-for, to reactively apply updates to the DOM when the value of its expression changes. Student questions regarding differences between Vue 2 and Vue 3, why the v-for directive is on the li element instead of the ul element, and if the data attribute is required are also covered in this segment.Getting Started with Vue Exercise
Students are instructed to choose a TV show and use their newly gained knowledge of directives to create an HTML page, reactive data for characters on the show, and render an empty state if no characters exist. Ben then walks through a possible solution to the exercise, including a new syntax for returning data.Getting Started Q&A
Ben answers student questions regarding if the if...else statement can be extended, if there are any gotchas with namespacing the characterList, and if characterList is globally available. How to render the characterList as a string instead of a list is also covered in this segment.Event Handling & View Model
Ben demonstrates handling events in Vue, defining methods, and using the v-on and v-bind directives to call those methods to add interactivity to the page. The v-model directive can be used in place of v-on and v-bind to create a two-way binding.Event Handling Q&A
Ben answers student questions regarding tracking the increment amount, passing arguments to methods, and the difference between @click and v-on clickEvent Handling Exercise
Students are instructed to add a favorite button to each character and render the favorited characters in a separate list. Ben then walks through a possible solution to the event handling exercise, including the bonus challenge.
Watchers & Computer Properties
Watchers & Computed Properties
Ben demonstrates using the watch option to trigger a function whenever a reactive property changes. Computed properties allow the ability to declaratively compute derived values.Computed Properties Exercise
Students are instructed to create a statistics column for character attributes that leverages computed properties. Ben then walks through a possible solution to the computed properties exercise.Computed Properties vs Watchers
Ben answers a student's question regarding real-life examples of when it is better to use computed properties over watchers.
Vue Tools
Progressive Enhancement
Ben discusses the ability to progressively enhance websites with Vue using the CDN to avoid complete code rewrites. A brief walkthrough of the process GitLab took migrating their app to Vue is also provided in this segment.create-vue, Dev Tools, & Volar
Ben walks through creating a new Vue application using the Vite-based scaffolding tool create-vue, the contents of the generated application, and briefly demonstrates the available functionality of the Vue dev tools. A student's question regarding migrating an existing project to Vite is also covered in this segment.Build Tools Exercise
Students are instructed to create a new project using create-vue named your ${show_name}-forum and migrate index.html into App.vue. Ben then walks through a possible solution to the build tools exercise. A student's question regarding using .vue without using Vite is also covered in this segment.Custom Components
Ben demonstrates creating a custom component in Vue and scoping all of the associated JavaScript and HTML to that specific file. Components are pulled into the application by registering them in the exports under the components option.Custom Components Exercise
Students are instructed to practice scoping, creating, and importing custom components to App.vue. Ben then walks through a possible solution to the custom component exercise and briefly discusses the data flow between the application and components.Props
Ben walks through passing data to components by declaring props. A student's question regarding passing functions as props is also covered in this segment.Props Exercise and Q&A
Be instructs students to practice implementing props for their Vue application. Student questions regarding how to approach user details when creating a user card component, if computed properties could be used to pass data, if properties are passed by reference, and will the component rerender if the data changes outside of it are also covered in this segment.Emitting Custom Events
Ben discusses defining and emitting custom events, defining global methods, and demonstrates the Vue dev tools timeline registering DOM events. Student questions regarding if events traveling multiple levels have to be caught and reemitted and if there is an emit equivalent in Vue 2.Emitting Custom Events Exercise
Students are instructed to build out components as they see fit, whether receiving data from the parent or keeping it at the top level. Ben then walks through a possible solution to the exercise and answers some student questions. Student questions covered in this segment include having the favoriteCharacter function in a separate module, how the data gets into the favoritesList variable.Slots for Layout
Ben demonstrates using slots to pass a template fragment to a child component and let the child component render the fragment within its template. Props and if-else conditions can be attached to slots to allow for more flexibility and reusability.Slots Exercise
Students are instructed to create a base layout for their application and practice implementing slots. Ben then walks through an example solution for the slots exercise
Fetching Data
Fetching Data in Lifecycle Hooks
Ben demonstrates fetching async data in Vue and walks through a diagram of how a lifecycle hook works. A student's question regarding if the lifecycle hooks can be paused if a promise is not returned is also covered in this segment.Generic Component
Ben walks through the contents of the cest-la-vue project and introduces a "meta component" for rendering dynamic components or elements. The component to render is determined by the is prop which can be an HTML tag name, a component's registered name, or bound to the definition of a component.Fetching Data in Lifecycle Exercise
Students are instructed to create a UsersPage component, leverage the created lifecycle hook to fetch a list of users from the JSONPlaceholder API, and render the returned list of users to the page. Ben then walks through the solution to the fetching data in lifecycle exercise.Generating Unique Keys on the Client
Ben answers a student's question regarding generating unique keys on the frontend by providing an npm package called uuid. A brief pseudocode demonstration of how this package would be used is also provided in this segment.
Composition API
Composition API
Ben discusses that composition API, when used with Vue, is vanilla JavaScript and allows custom code organization at the cost of having no default option. A brief overview of the experimental feature Suspense and a demonstration of rendering data from an API is also covered in this segment.Reactive References
Ben demonstrates how to create reactive references using the Vue helper methods, including ref, computed, and reactive. The differences between Composition API and Options API are also briefly discussed in this segment.Composition API Exercise
Students are instructed to refactor the UsersPage to use setup to fetch data. Ben then walks through a possible solution to the Composition API exercise.script setup
Ben discusses a Vue compiler option to fully buy into using composition API while saving code space. Student questions regarding if this route would result in more concise components and how stable the script setup is are also covered in this segment.script setup Exercise
Students are instructed to refactor the UserPage to use script setup, practice using defineProps, and practice using defineEmits. Ben then walks through a possible solution to the script setup exercise.Composables
Ben demonstrates a type of reusable JavaScript utility to share props between components called composables that similarly utilizes the use prefix from React. A walk-through of implementing composables in the base counter is also covered in this lesson.Composables Q&A
Ben answers student questions regarding how beforeDestroy works in Composition API, how permanent the composables are, and how an unmounted component's state is handled.Composables Exercise
Students are instructed to create a composables folder in the src directory, analyze the app to locate a shareable piece of state or functionality, and create a file called useState.js / useFunction.js. Ben then walks through a possible solution to the composables exercise.
Styling Components
Global vs. Scoped Styles
Ben demonstrates how to define global and scoped styling in a Vue application. Scoped styles take relevant component elements and append a unique data attribute.CSS Modules
Ben demonstrates applying the module mode to CSS styles to allow scoping styles to components. The selected class gets recompiled with a generated hash attached to define the scope.v-bind in CSS
Ben discusses combining the interactivity of JavaScript and CSS styling using Vue's v-bind.Styling Components Exercise
Students are instructed to refactor styles using an external global file, practice styling with scoped CSS, and practice styling with CSS modules. Ben then walks through a possible solution to the styling components exercise.
Routing & Deployment
Vue Router
Ben walks through setting up Vue Router, defining a set of routes, and applying those routes to the application. Each route is defined by a path and a component variable.History Management
Ben discusses defining how URLs should be displayed using various Vue history modes, including hash, HTML5, and memory mode. A demonstration of what happens when including Vue Router while creating a new project with create-vue is also provided in this segment.Vue Router Exercise
Students are instructed to open the Vue Router docs for reference, install and configure Vue Router, move page components into a new src/views directory, create a src/router.js file with the correct routes, and update App.vue to utilize the router-link and router-view components. Ben then walks through a possible solution to the Vue Router exercise.Programmatic Navigation
Ben demonstrates implementing programmatic navigation using useRouter from Vue Router to responsively navigate the user. The router.push and router.replace methods are demonstrated in this segment.Dynamic Route Params
Ben walks through dynamically rendering data based on the provided navigation route using the useRoute helper method. Student questions regarding params parent routes and nested navigation are also covered in this segment.Dynamic Routing Exercise
Students are instructed to use programmatic navigation on the LoginPage to navigate the user to a DashboardPage and create a dynamic route that displays each user's profile on its own page. Ben then walks through a possible solution to the dynamic routing exercise.State Management with Pinia
Ben discusses defining and managing a global store using the Vue store Pinia. Pinia provides the structure for managing an application's state through getters and actions and includes dev tools.State Management with Pinia Exercise
Students are instructed to install Pinia, configure Vue to use it, create a stores folder in the src directory, create an itemTypeStore.js in it, create a store, add some state, getters, and actions, and call things in the component. Ben then walks through a possible solution to the state management with Pinia exercise.VueUse Hooks & Vue Transitions
Ben discusses helpful hooks from VueUse for accessing local storage using the useStorage and setting color preferences with useColorMode. Transitions and transition components in Vue are also briefly discussed in this segment.Deploying Your Vue App
Ben demonstrates connecting a GitHub account and deploying a Vue application with Netlify. Netlify will keep track of the application's GitHub repository and rebuild the deployment on a repo change.