Vue tutorial – creating an Vue Bootstrap app, step by step

Vue tutorial

Author: Dawid Adach


What Vue is?

Vue is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. Vue is widely used by world wide among the others by:

Twitter logo Pinterest logo Codecademy logo Google logo Paypal logo Airbnb logo uber logo Microsoft logo 9gag logo Adobe logo Xiaomi logo Alibaba logo

Vue his called by many a rising star among libraries due to the pace in which it gains popularity.

What do I have to know to start this course?

You must have a basic knowldege od HTML, CSS and JavaScript. In case you lack some knowledge try these tutorials first:

They are short, simple and also free.

I have basics, how shall I start course?

In order to work with Vue you have to install Node Package Manager (npm). If you already have it you can start course directly!

Do I need anything else?

You will need some text editor. We recommend Visual Studio Code.

Is this tutorial really free?

Yes, it's completely free.

What will I build?

Along the course you will build a real fully respnsive Daily Agenda application, you can check the final result here. (TODO link)

Add new event preview

What will I know once I finish this tutorial?

Along this course you will also learn many powerful and useful technologies such as:

Cross platform

Regardless whether you are using Windows, macOS or Unix - this tutorial show you how to use Vue on each operating system.


If you have ever wonder why some websites are blazing fast you should continue reading. This tutorial will guide you how to build Single Page Application, which works without reloading.


Within this tutorial you will learn about Responsive Web Development - in other words, how to build a website which looks awesome on each device. Regardless whether it's 30-inch monitor or smartphone screen.

material design for bootstrap logo

This tutorial will also teach you how to combine 2 powerful tools - Bootstrap and Material Design to achieve an outstanding effect on your website or an application.

Rate this lesson

Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding & in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...