Creating an instance of Vue

The Vue library we added in the last video provides a global Vue object, which includes several APIs.

We can create a new Vue app by calling the createApp method.

So let's get rid of this console.log and put:

public/script.js

Vue.createApp();

Mount element

As it is, our new Vue app only exists in JavaScript and doesn't yet have access to our HTML page.

In order to attach this Vue app to the page, we can chain on the mount method:

public/script.js

Vue.createApp().mount();

We now need to pass a query selector to the mount method to tell the Vue app where in the page we want it to attach.

Looking at our HTML file, you'll see that I've put an element with id app inside the body tag. This is the part of the page we want Vue to modify.

To mount Vue on the element we just saw, we'll reference it with CSS selector #app.

public/script.js

Vue.createApp().mount("#app");

With that, we've now created a Vue app and attached it to the page. In the next video, we'll see how we can use Vue now to manipulate the page.