Vue.js 3 Online Course
Vue.js 3 Online Course
This course is designed for developers looking to quickly master Vue.js. It covers both the traditional Options API and the newer Composition API, showing how to mix and match them. The course includes various modules: 4 focused on core concepts (Options API, Composition API, Vuex, Vue Router), and 4 hands-on projects that demonstrate how to apply these skills in real-world applications. You will learn how to architect apps, manage state with Vuex, and handle front-end routing with Vue Router. The course concludes with a capstone project where you will apply all the learned concepts to build a complete application. By the end, you will have a solid foundation in Vue.js for your future projects.
Key Benefits
- Gain a comprehensive understanding of Vue.js, starting from the basics and progressing to application development.
- Work on multiple hands-on projects to apply the concepts learned and build practical experience.
- Dive into state management with Vuex and front-end routing with Vue Router, enhancing your application development skills.
Target Audience
This course is ideal for web developers at the beginner to intermediate level. It is also well-suited for those looking to explore the new features of Vue.js 3. A fundamental understanding of web technologies such as HTML, CSS, and JavaScript, along with basic terminal skills, is required to fully benefit from the course.
Learning Objectives
- Develop robust applications utilizing Vue.js
- Create modular and reusable components for efficient development
- Implement Vue Router for seamless front-end routing and navigation
- Apply design patterns to enhance application architecture
- Gain a comprehensive understanding of both the Options API and Composition API in Vue.js, and learn when to use each effectively
Course Outline
The Vue.js 3 Exam covers the following topics -
Module 1 - Course Introduction
- Introduction to Vue.js
- Setting Up Your Development Environment
- Building Your First Vue.js Application
- Adding Template Properties
- Handling User Interactions with Methods
- Control Flow with v-if and v-else
- Iterating with v-for
- Understanding Computed Properties
- Binding Classes Dynamically
- Implementing Input Validation
- Mastering the v-model Directive
- Creating Your First Component
- Passing Props to Components
- Communication Between Parent and Child Components with Events
Module 2 - Project 1: User Sign-up Form with Validation
- Overview of the User Sign-up Form Project
- Working with Single File Components
- Building a Custom Button Component
- Creating Custom Input Foundations
- Implementing Dynamic Validation
- Rethinking the Form State
- Validating the Form Data
- Submitting and Finalizing the Form
Module 3 - Project 2: Pokémon Evolutions
- Introduction to the Pokémon Evolutions Project
- Setting Up the Card Foundations
- Fetching Remote Data with fetch
- Handling Multiple Data Sources
- Utilizing Lifecycle Hooks
- Rendering Dynamic Content
- Modularizing Components with Slots
- Reusing Code for Fetching Evolutions
- Styling Components with Class Bindings
- Separating Business Logic from Presentation Components
Module 4 - Composition Fundamentals
- Introduction to Composition Fundamentals
- Exploring the Composition API
- Managing Reactivity with ref
- Using reactive for Complex Values
- Composing Computed Properties
- Working with watch and watchEffect
- Using watch Before and After Changes
- Creating the useNumbers Composable
- Leveraging Open-Source Libraries like Vue Use
Module 5 - Project 3: Composing a Microblog
- Overview of the Microblog Project with the Composition API
- Setting Up the Microblog Store
- Rendering Posts with the Card Component
- Creating the Hashtag Component
- Emitting Events with the Composition API
- Filtering Posts Using Computed Properties
- Refactoring the Posts Store
- Implementing Post Liking Functionality
- Searching for Hashtags
- Refactoring and Exercise Solutions
Module 6 - Vue Router Fundamentals
- Introduction to Vue Router
- Working with the RouterLink Component
- Managing Nested Routes and Child Components
- Using Route Params with the Composition API
- Creating a New Post Route
- Designing a New Post Form
- Implementing usePosts Composable
- Handling Redirects with Vue Router
- Refactoring with the Options API
Module 7 - Vuex Fundamentals
- Introduction to Vuex State Management
- Setting Up a Vuex Store and State
- Updating State Using Mutations
- Advanced Mutation Techniques
- Dispatching Actions in Vuex
- Mocking Server Calls and Fetching Posts
- Displaying the Current Post
- Using Vuex Getters
- Scaling Vuex with Modules
- Refactoring with the Options API
Module 8 - Project 4: Capstone Project
- Introduction to the Capstone Project
- Setting Up Vuex in the Project
- Creating Reusable Layouts
- Fetching Albums with fetch
- Streamlining the Data Fetching Workflow with Vuex
- Creating the Album Component
- Fetching Large Data Sets of Photos
- Adding and Improving Routing
- Using RouterLink for Navigation
- Managing Routing Parameters with watchEffect
- Implementing Vuex Level Caching for Better Performance
- Final Recommendations and Parting Thoughts
