The Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)

The Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)

What is Vue.js ?

A popular JavaScript framework for building user interfaces.

The core Vue library is focused on doing one thing and doing that one thing really well which is building user interfaces.

Vue does not focus on the other aspects of your application like routing or HTTP requests.

Vue has a rich libraries that you can integrate to handle all those aspects of your application based on your requirement for example there is vuex for complex state management, view-router for routing, vuetify for ui elements and a lot more libraries for every requirement you might have for your application.

Why Vue.js ?

Vue currently has +175k Github stars - the third most started Github repository in the world, does that mean it is better than react or angular or other javascript frameworks ?

Absolutely no, it simply means that thousands of developers around the world enjoys working with vue and because of this huge community you're going to find solutions to most of the problems that you face when building complex web applications and this gives a huge advantage to vuejs, know that you're going to find a solution for any problem that you might face during development is always comforting but let's focus on the technical aspects of vue which makes it a wonderful framework to use, the vue docs categorize this into three core reasons:

1. Vue is approachable

That means Vue is really simple, all what you need is :

  • Familiarity with HTML, CSS and JavaScript
  • Add a script tag with a reference to vue.js and start building Vue applications in no time at all.
  • Vue Devtools which gives insight into your apps.
  • Vue CLI with which you can quickly scaffold and manage projects.
  • Vue also a component based architecture
  • Vue is declarative
  • Vue will make it painless for you to create complex user interfaces by abstracting away the difficult parts.

2. Vue is versatile

  • Create powerful single page applications from scratch using build tools like webpack.
  • Incorporate Vue into an existing legacy projects and make progressive enhancement by making changes only to certain parts of your application.

3. Vue is performant

  • Vue measures just 20KB minified and gzipped at runtime.
  • Better performances because of virtual DOM; only the necessary pieces in the DOM are updated which results in better performances.
  • Vue is a framework built by taking the good parts from a lot of other libraries and frameworks and then improving where necessary, if you work with react for example you might actually see a lot of similarities.
  • Vue is going to be a great addition to your skill set.


  • A thirst for knowledge
  • HTML, CSS and JavaScript fundamentals
  • ES6+ features
  • A knowledge of modern JavaScript
  • Basic terminal proficiency (make files and directories)


Another Vue.js 3 from zero to hero course - kind of.

There are 8 modules; 4 introduce fundamental skills (Options API; Composition API; Vuex and Vue Router). Every other module is a project, so you can see how to apply the fundamental skills in real apps. I am a big believer in learning by doing.

After covering Vue; we look at Vuex, Vue's state management solution, and Vue Router, for front-end routing. The course culminates with a capstone project, using the Vue trunity (Vue, Vuex, Vue Router) to build an application.

What you'll learn in this course

  • Options API
  • Composition API
  • Vuex Vue's state management solution
  • Vue Router for front-end routing
  • Vuetify for building beautiful UI interfaces.
  • Build a robust and efficient Web applications with Vue.js