Netlify
Vue 3 Fundamentals
7 hours
CC
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
CloseWhat They're Saying
I just completed "Vue 3 Fundamentals" by Ben Hong on Frontend Masters! Maybe my favorite framework, excited to now learn Nuxt
noah
noahh_ts
Great to see emits which was missing in Vue 2. Awesome instructor for Vue 3.
Martin Smit
hoektoe
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
Table of Contents
Introduction
Section Duration: 4 minutes
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
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.
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.
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.
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.
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.
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.
Ben answers student questions regarding tracking the increment amount, passing arguments to methods, and the difference between @click and v-on click
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
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.
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.
Ben answers a student's question regarding real-life examples of when it is better to use computed properties over watchers.
Vue Tools
Section Duration: 1 hour, 51 minutes
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
Section Duration: 1 hour, 12 minutes
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
Ben discusses combining the interactivity of JavaScript and CSS styling using Vue's v-bind.
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
Section Duration: 1 hour, 19 minutes
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
Ben wraps up the course by providing suggestions for where to go next, including Nuxt and TypeScript. Links to Ben's social media accounts are also provided in this segment.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops