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

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.