Vue 3 Fundamentals
Vue.js is rapidly growing in popularity due to its ease of use. This course will teach you all the fundamentals of Vue development including creating components, directives, filters, routing, Pinia state management, and deploying to production.
What you'll learn
Vue is one of the most lightweight and enjoyable front-end development frameworks for building modern web applications, and there are a lot of important concepts to learn to become a skilled Vue developer. In this course, Vue 3 Fundamentals, you will gain the foundational knowledge required to build robust, production-ready applications with Vue. First, you will see how to build your own project from scratch with the Vue CLI, including creating components using both the Options and Composition APIs, and managing communication between components. Next, you will explore how to create routes and navigate from page to page, manage application state and communicate with the server using Pinia, and create custom directives. Finally, you will learn how to deploy and configure your application to production. When you are finished with this course, you will have gained the fundamental skills and knowledge of Vue needed to create reliable and professional Vue applications.
Table of contents
- Introduction and What We'll Build 2m
- A Conceptual Overview of Vue 2m
- Setting Up Our Environment 2m
- Exploring Vue Tooling Options 2m
- Creating a New Project with the Vue CLI 7m
- Exploring What the Vue CLI Created 4m
- Creating a New Project with create-vue 3m
- Cloning Our Demo Application 1m
- Modifying the Default Home Page 7m
- Introduction 1m
- Binding Attributes to Data with v-bind 8m
- Binding to Events with v-on 7m
- Using Shorthand Bindings 1m
- Binding to Computed Properties 3m
- Displaying Data with Interpolation 4m
- Conditionally Displaying Content with v-if and v-show 4m
- Repeating Elements with v-for 8m
- Formatting Data 4m
- Using Component Lifecycle Hooks 2m
- Sharing Component Functionality with Mixins 2m
- Summary 1m
- Introduction 1m
- Why Use the Composition API? 7m
- Using the Composition API 10m
- Using <script setup> for Composition API Components 3m
- Making Components Reactive with the Reactivity API 8m
- Comparing the Different Reactivity Methods 3m
- Using Lifecycle Hooks with the Composition API 2m
- Exploring the Benefits of the Composition API 9m
- Summary 1m
- Introduction 1m
- Creating Child Components 8m
- Passing Data to Child Componets with Props 11m
- Validating Props 5m
- Passing Data to Parent Components with Events 12m
- Lifecycle Hooks Revisited 2m
- Using Provide/Inject to Pass Data to Deeply Nested Components 10m
- Slots: Injecting Content Into Child Components 5m
- Using Named Slots 3m
- Summary 1m
- Introduction 1m
- What Is State Management? 2m
- Creating a Pinia Store 3m
- Understanding Pinia's Basics 2m
- Storing and Accessing Data in a Pinia Store 7m
- Maintaining Reactivity with Store State 8m
- Using Calculated Data (Getters) from a Pinia Store 3m
- Using Pinia Store Actions to Fetch Data from an API 13m
- Using an Options Store 3m
- Using Stores in Options API Components 3m
- Summary 1m
- Introduction 2m
- Creating a Production Build with the Vue CLI and Vite 3m
- Using Environment Variables and Build Modes 7m
- Deploying to a Production Webserver 3m
- Handling Deep Linking on the Server 4m
- Inspecting the Built-in Webpack Config 2m
- Customizing the Webpack Config 7m
- Customizing Vite Config 3m
- Summary 1m
About the author
Jim Cooper is a software developer at Pluralsight, with more than 20 years of software development experience. He has a passion for Agile processes, especially lean software development. Jim has been developing production Angular apps since before Angular version 1.0, including Pluralsight's first Html5-based video player. Jim has over 10 years of TDD and pair programming experience which has contributed significantly to his professional development. He has successfully mentored other developers... more