Complete Vue.js 3 Course- Vuejs 3, Vite, TailwindCSS, Pinia

Complete Vue.js 3 Course: Vuejs 3, Vite, TailwindCSS, Pinia, available at $64.99, has an average rating of 4.54, with 221 lectures, based on 193 reviews, and has 1290 subscribers.

You will learn about Develop real-life projects using Vue 3, Tailwind, Pinia, and Vue Router. Combine Vue with non-Vue techs like COOKIE, recursion, Axios cancelable request, etc. Truly understand of the composition API and fully unleash its potential. Quickly adapt to other frameworks like React, Svelte, etc. This course is ideal for individuals who are Beginners who want to learn how to build Vue 3 projects. or Developers who already know Vue2 and want to learn new features of Vue 3. or Developers who want to learn how to use Tailwindcss or Developers who want to learn how to use Pinia It is particularly useful for Beginners who want to learn how to build Vue 3 projects. or Developers who already know Vue2 and want to learn new features of Vue 3. or Developers who want to learn how to use Tailwindcss or Developers who want to learn how to use Pinia.

Enroll now: Complete Vue.js 3 Course: Vuejs 3, Vite, TailwindCSS, Pinia

Summary

Title: Complete Vue.js 3 Course: Vuejs 3, Vite, TailwindCSS, Pinia

Price: $64.99

Average Rating: 4.54

Number of Lectures: 221

Number of Published Lectures: 221

Number of Curriculum Items: 221

Number of Published Curriculum Objects: 221

Original Price: $89.99

Quality Status: approved

Status: Live

What You Will Learn

Develop real-life projects using Vue 3, Tailwind, Pinia, and Vue Router.

Combine Vue with non-Vue techs like COOKIE, recursion, Axios cancelable request, etc.

Truly understand of the composition API and fully unleash its potential.

Quickly adapt to other frameworks like React, Svelte, etc.

Who Should Attend

Beginners who want to learn how to build Vue 3 projects.

Developers who already know Vue2 and want to learn new features of Vue 3.

Developers who want to learn how to use Tailwindcss

Developers who want to learn how to use Pinia

Target Audiences

Beginners who want to learn how to build Vue 3 projects.

Developers who already know Vue2 and want to learn new features of Vue 3.

Developers who want to learn how to use Tailwindcss

Developers who want to learn how to use Pinia

This course teaches Vue 3, Tailwind, Pinia, and Vite.

The Vue section includes Vue 3, Vue Router, VueX, and the composition API.

No Vue 2 experience is needed. Everything is taught from the beginning, including basic JavaScript knowledge.

Vue is just a toolbox; we are responsible for picking the right tools for the right job.

We analyze our project and then find the needed Vue features. This requires a thorough and deep understanding of Vue features. You must know them inside out. This is also what we strive to achieve with this course.

For example, the “v on” directive seems identical to the native “addEventListener” method. But they are not. When “closure” is involved, the difference between these two shows up right away.

If you don’t know this and your program design relies on “closure,” it will inevitably fail. You will waste hours trying to find the reason, which might then delay development progress.

Crossing Disciplinary Boundaries:

Your real-life projects do not care about what Vue can or cannot do. So you often need to cross disciplinary boundaries, integrating Vue with non-Vue technologies.

For example, saving the new item order needs COOKIE while creating a list may require recursion.

Our goal is to build a complete project, not just the Vue section of that project. So all non-Vue subjects will be taught before being used in our Vue program.

Coordinating Vue and non-Vue features:

Crossing disciplinary boundaries inevitably brings another challenge—compatibility. You cannot just put two different things together and expect them to work smoothly right away.

For example, we need to modify the recursion program in order to fit the Vue render method in it.

Axios allows us to cancel an ongoing request. To install it in the Vue “watchEffect” method, we need to borrow the scope of the setup function. This requires three parties to work together.

About Single-File Components:

We specifically delayed the introduction of the single file component. Most projects in the Vue section are made of only one HTML file, helping you focus on Vue. But don’t worry, you have plenty of opportunities to work with single-file components. The Pinia and Tailwind sections both use single-file components.

Course Curriculum

Chapter 1: Vue Basics, Reactivity, and Directives

Lecture 1: MVVM, MVC, Reactivity, Two-way Data Binding, Server Sider Rendering

Lecture 2: How Vue 2 Stays Reactive?

Lecture 3: How Vue 3 Stays Reactive?

Lecture 4: Factory Pattern and Singleton Pattern: Data Consistency or Data Independence

Lecture 5: First Vue Program: App Instance, Root Component, $el, vNode, ref Attribute

Lecture 6: Options Object, Custom Properties, Data Properties, Expose

Lecture 7: Template Syntax, Reactivity, Forced Update

Lecture 8: v-bind: Controlling Attribute Values

Lecture 9: v-bind Part 2

Lecture 10: v-text, v-html, v-once, v-pre, and v-cloak

Lecture 11: Conditional Rendering: v-show, v-if, v-else, and v-else-if

Lecture 12: v-for: Iterating Over Arrays and Objects

Lecture 13: v-for: JSON

Chapter 2: Computed Properties, Vue Methods, and v-on

Lecture 1: Computed Properties: Introduction

Lecture 2: Computed Properties: Caveats

Lecture 3: Computed Properties: Edgy Situations

Lecture 4: Computed Properties + v-for === ^_^

Lecture 5: Methods and the V-ON Directive

Lecture 6: V-ON and Closure

Lecture 7: Event Modifiers: .once, .stop, .self, .capture, and .prevent

Lecture 8: The .passive Modifier

Chapter 3: Must-have Array-manipulating Skills

Lecture 1: Making Swaps Without Using a Third Variable

Lecture 2: Sorting Array Elements

Lecture 3: Challenge: Sorting Products Based on Price

Lecture 4: Reducing an Array

Lecture 5: Deduplicating via Reducing

Lecture 6: Finding the Most XXX Element or Elements

Lecture 7: Finding the Highest Price and Collecting Items With That Price at the Same Time

Lecture 8: Finding the Most Frequently Occurring Elements

Lecture 9: Do the impossible

Lecture 10: The Invisible IF

Chapter 4: Application & Challenge: Controlling the Order of List Items

Lecture 1: Creating an Adjustable List

Lecture 2: Pinning a Selected Item to the Top of the List

Lecture 3: Sorting List Items INDIVIDUALLY

Lecture 4: Tracking the Order Change of List Items

Chapter 5: Application & Challenge: Vue + COOKIE

Lecture 1: Cookie Intro

Lecture 2: Cookie Basic Operation

Lecture 3: Asking for User Permission

Lecture 4: A Menu that Remembers Part 1

Lecture 5: A Menu that Remembers Part 2

Chapter 6: Application & Challenge: Vue + Recursion

Lecture 1: Introduction to Recursion

Lecture 2: Deep Copy an Array or Object

Lecture 3: Infinite List

Lecture 4: Improvement

Chapter 7: Collecting Data from Users

Lecture 1: V-MODEL and Its Modifiers: Number, Lazy, and Trim

Lecture 2: Mini APP: Limiting User-submitted Data

Lecture 3: V-MODEL In Radio Buttons

Lecture 4: V-MODEL In Selection Lists and Checkboxes

Lecture 5: Mini App

Chapter 8: Controlling CSS Styles Using Vue

Lecture 1: Binding CSS Classes

Lecture 2: Controlling Inline CSS

Lecture 3: App & Practice: Automatically Highlighting Selected List Items

Chapter 9: Automatic Execution: Lifecycle Hooks

Lecture 1: LifeCycle Hooks

Lecture 2: Update and Render Hooks

Chapter 10: Automatic Execution: Watchers

Lecture 1: Watchers

Lecture 2: Watching Arrays and Objects

Lecture 3: Flush Timing

Lecture 4: Multiple Watchers

Lecture 5: $watch

Lecture 6: $watch: Arrays and Objects

Lecture 7: Setting a Getter to Watch Complicated Results

Chapter 11: Vue Components

Lecture 1: Vue Child Components Introduction

Lecture 2: Lifecycle Hooks of Child Components

Lecture 3: Props

Lecture 4: Props Misc

Lecture 5: The Object Syntax for Setting Props: PLACEHOLDER VIDEO

Lecture 6: Custom Events: Sending Data From A Child Component to Its Parent Component

Lecture 7: Building a Two-way Data Path Between a Parent Component and its Child One

Lecture 8: Using the v-model Directive in Child Component Tags

Lecture 9: Slots Basics

Lecture 10: Scoped Slots

Lecture 11: Teleport

Lecture 12: Inheriting Non-prop Attributes

Lecture 13: Dynamic Components

Lecture 14: KeepAlive: Reusing Component Instnances

Lecture 15: Outputting Components Dynamically

Chapter 12: Transition Effects

Lecture 1: CSS Transition Properties

Lecture 2: Vue Transition Classes

Lecture 3: Creating a Transition Effect

Lecture 4: Transitioning List Items

Lecture 5: How to Use Animate.css

Lecture 6: Creating Transition Effects Using Animate.css

Lecture 7: Transition Hooks

Lecture 8: How to Tween using GSAP: Green Sock Animation Platform

Lecture 9: Transitioning States Using GSAP

Lecture 10: Transition Component

Chapter 13: Reusing Codes: Mixins and Custom Directives

Lecture 1: Mixins

Instructors

OnlyKiosk Tech
Provide Effective Coding Training

Rating Distribution

1 stars: 11 votes

2 stars: 12 votes

3 stars: 27 votes

4 stars: 40 votes

5 stars: 103 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!