Learn
Introduction to Vue
Creating Vue Apps

Our project now has access to the Vue library. This gives us access to all of the code that will allow us to make Vue apps, web front-ends built using Vue, but doesn’t actually create one for us. We now need to write the code to actually make a Vue app.

Vue makes it easy to make a new app by exporting a class called Vue. Much like any other JavaScript class, we create instances of this class using the new keyword. Each of these Vue instances is a fully-functioning Vue app. Let’s look at an example:

// app.js const app = new Vue({});

By invoking the Vue class constructor with the new keyword, we create a new instance of the Vue class which we name app. The Vue constructor can set many properties on our Vue app when it is called. However, unlike many constructors, the Vue class does not take each of these properties as separate arguments. Rather, it only takes one argument.

Vue apps require a lot of information — information that will differ greatly from app to app. To accommodate this, the Vue constructor doesn’t attempt to take in each piece of information as its own parameter. This would require developers to keep careful track of which order arguments were expected in, making it difficult to add properties or make changes.

Instead, the Vue constructor takes in only one object, called the options object. Each piece of information the Vue app needs to function is added to the options object as a key-value pair. This means that developers can easily update or add information in the Vue app by just looking for the correct key in the options object.

We will see this in practice in the following exercises as we add information to our options object.

Instructions

Check out the diagram to the right to examine the syntax of the Vue constructor in more depth. When you’re ready, click ‘Next’ to go to the next exercise.

Folder Icon

Sign up to start coding

Already have an account?