VueJS is a progressive javascript framework. VueJS is used to develop dynamic and interactive webpages. As per the official website "VueJS is an Approachable, Versatile & Performant Javascript framework and it helps to write Maintainable and Testable code"

What is Progressive Framework?

VueJS is Progressive, this means that if you have a server-side application, You can plug view to just a part or even a single page of your application so that it provides a richer and interactive experience.

Like other frameworks, Vue allows you to split a page into reusable components, each having its own HTML, CSS and Javascript needed to render that piece of the page.

About this VueJS Tutorial Course. 

This VueJS tutorial assumes absolutely no knowledge of VueJS or any other javascript framework. I have structured this course so that you can start from basic concepts of VueJS and then advance with more complex concepts, step by step.


Since VueJS is a javascript framework, To understand the concepts and complete practice exercises it's best if you know the following

  • HTML
  • CSS
  • Javascript.


You can use any editor of your choice to start with the tutorials and practice exercises. I use and recommend Microsoft VSCode since it's lightweight and does the required job efficiently.

Practice Exercises & Recipies 

Learning any new framework requires a lot of practice and for the same purpose, I have tried to include a lot of practice exercises and recipes related to the concept at the end of tutorials. It also includes a solution to the exercises, but it's recommended to refer to the solution only after trying to solve yourself.

Practice exercises will appear at the end of the tutorial in the following example box.

Practice Exercises

  1. This is an example practice exercise
  2. This is an example practice exercise

Running the Code Examples.

Most of the initial examples are HTML and you can open the pages directly with the browser of your choice to run the code.

I recommend installing the Extension 'Live Server' into VSCode.

live server VueJS

LiveServer gives you the ability to spin up a dummy server on your machine and also provides hot reloading, it reloads the webpage automatically once you make the code changes and save it.

Example Demo & Code

Where possible the running demonstration of the example application is shown at the end of the page itself, so that you can interact with the running application.

Also, a link to the github code repo will be included at the end of each tutorial.


Happy Coding and Learning!