Vue 3 Fundamentals

Ben Hong

Ben Hong

Netlify
7 hours CC
Vue 3 Fundamentals

Course Description

Learn Vue, one of the most popular and approachable JavaScript frameworks! Get hands-on experience building with flexible components using directives, props, lifecycle hooks, and slots. You’ll use Vue Router for routing and Pinia for state management. By the end of the course, you will have the skills and knowledge to create a Vue project from start to finish, deploy it to production, and explore the Vue ecosystem on your own.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: January 4, 2023

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 4 minutes
  • Introduction
    Ben Hong introduces the course by providing some personal background, discussing who this workshop is for, and the course prerequisites. Course resources and an overview of the workshop format are also covered in this segment.

Overview

Section Duration: 1 hour, 12 minutes
  • 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 click
  • Event 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

Section Duration: 23 minutes

Vue Tools

Section Duration: 1 hour, 51 minutes
  • 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
    Ben 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

Section Duration: 35 minutes

Composition API

Section Duration: 1 hour, 12 minutes
  • 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

Section Duration: 18 minutes

Routing & Deployment

Section Duration: 1 hour, 19 minutes
  • 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.

Wrapping Up

Section Duration: 1 minute
I just completed "Vue 3 Fundamentals" by Ben Hong on Frontend Masters! Maybe my favorite framework, excited to now learn Nuxt
noah

noah

noahh_ts

Great to see emits which was missing in Vue 2. Awesome instructor for Vue 3.
Martin Smit

Martin Smit

hoektoe

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now