Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Complete Vue.js 3 Course: Vuejs 3, Vite, TailwindCSS, Pinia
Rating: 3.9 out of 5(249 ratings)
1,492 students

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

Vue3, TailwindCSS, VueX, Vue Router, Composition API, Pinia, and Vite; A Step-by-Step Guide to Building Vue Programs
Created byOnlyKiosk Tech
Last updated 4/2025
English

What you'll 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.

Course content

26 sections • 209 lectures • 16h 21m total length

  • MVVM, MVC, Reactivity, Two-way Data Binding, Server Sider Rendering4:09

    In this lesson, we will give you a brief introduction of how a Vue program works internally. We will also compare Vue with CodeIgniter, which is built using the more traditional MVC architecture.

  • How Vue 2 Stays Reactive?4:22

    In this lesson, we will show you how Vue 2 updates template elements.

  • How Vue 3 Stays Reactive?5:41

    I know of your past fondness for the Object.defineProperty() method, but I can whole-heartedly endorse a new breed of ES6--PROXY. And I know you will appreciate the matching REFLECT object.

  • Factory Pattern and Singleton Pattern: Data Consistency or Data Independence2:15

    In this lesson, we will introduce to you the two most fundamental design patters: factory pattern and singleton pattern. These two patterns generate the opposite results.

  • First Vue Program: App Instance, Root Component, $el, vNode, ref Attribute8:49

    In this lesson, we will create our first Vue 3 program. In this process, we will introduce to you a series of key concepts like the app instance, the root component instance, vNode, etc. You will also learn ref which is a very useful development tool.

  • Options Object, Custom Properties, Data Properties, Expose7:10

    In this lesson, we will set the data option in the options object. We will also try the setup function. We will show you how custom properties are saved into the component instance object.

  • Template Syntax, Reactivity, Forced Update5:06

    In this lesson, we will show you how to display custom properties in the component template.

  • v-bind: Controlling Attribute Values2:26
  • v-bind Part 25:29

    The v bind directive is the most important and commonly used Vue directive, allowing us to control attribute values. It is very important you understand  HTML attributes controlled by the v bind directive are NOT real HTML attributes. They are actually arguments of the v bind directive. They are specifically named after native HTML attributes.

  • v-text, v-html, v-once, v-pre, and v-cloak3:09

    In this lesson, we will show you less commonly used Vue directives.

  • Conditional Rendering: v-show, v-if, v-else, and v-else-if4:50

    Conditional rendering.

  • v-for: Iterating Over Arrays and Objects4:29

    The V FOR directive is the Vue equivalent of the FOR loop statement. It helps us iterate over an array or an object. In your real-life projects, the V FOR directive is often used to display data retrieved from the backend API.

  • v-for: JSON4:40

Requirements

  • Basic JavaScript and HTML knowledge.

Description

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.

Who this course is for:

  • 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

Report abuse