The introduction to Vue.js course will begin by explaining why front-end JavaScript frameworks are used in the first place. In addition, it will explore why a front-end developer should choose Vue.js to build a website or web application instead of using vanilla JavaScript. Then, this course will dive into the basics of the Vue.js framework and Vue.js-based Single Page Applications.

Towards the end of the course, we will equip learners with sufficient knowledge and skills to build an intermediate level Vue.js Single Page Application!

How is this course structured?

This course is divided into the following modules that will walk through various concepts of the Vue.js framework and provide a hands-on experience of building a Vue.js application from scratch.

Why use JavaScript front-end frameworks?

The course provides an introduction to Vue.js, it will discuss its purpose, and compare it with other front-end frameworks.

Basics structure of a Vue.js app

A detailed explaination of the structure of a Vue.js application and its components are provided.

Vue directives, bindings, and reactivity

In this chapter, the Vue.js is covered in more detail. It will examine dynamic rendering of content and its styling.

Handling user input and event handlers

Different methods of user interaction with the webpage will be focused on and this chapter will explain how Vue.js makes the process easy and intuitive.

Vue components

As indicated by the name, we will dive into the details of Vue.js components, related concepts, and the philosophy of using components in a front-end application.

Interaction with a backend server (database and API)

This chapter will explain how a user can make a Vue.js application interact with an external API or a backend server so that it can fetch/post data to make the app useful.

The final app

Finally, you will learn the step-wise development of a fully working Vue.js Single Page Application by incorporating all the concepts in the course. In addition, this chapter will help you appreciate how the newly learned concepts combined to make a complete web application.

Live coding widget!

On this platform, a hands-on learning experience of writing and executing the code will be provided to see the output on the fly!

No setup or installation is required!

Hit the Run button on the live widget below to build your first Vue.js application!

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
Sample Vue.js application

As observed, it is easy to code and run on our platform. If the code in the different files above is difficult to understand, please do not feel overwhelmed. We will move through the course slowly so that we can understand one concept at a time.

Wait! How do we make sure you are actually learning? We have created quizzes and exercises that will help you analyze how much you have learned. To maximize your understanding, you are provided with explanations regarding these quizzes and exercises right away.

Take a sample quiz!

Here we have a quiz for you!

Q

Is Vue.js awesome?

A)

Yes!

B)

No :(