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

Vue tutorial - your own React Bootstrap app, step by step

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 worldwide among 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 is called by many a rising star among libraries due to the pace in which it has been gaining popularity.

What do I have to know to start this course?

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

They are short, simple and also free.

I have the basics, how shall I start the course?

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

Do I need anything else?

You will need a 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 responsive Daily Agenda application.

Add new event preview

What will I know once I finish this tutorial?

Along with 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 wondered why some websites are blazing fast you should continue reading. This tutorial will guide you on how to build a 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 a 30—inch monitor or a smartphone screen.

material design for bootstrap logo

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

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...