Mount a Vue Application to the DOM and Render Reactive Data

Instructor: [0:00] We have the files set up to help us learn Vue, so let's get stuck in. In our main.js file, we'll delete this test variable, and we will instantiate a Vue application, const app will equal Vue.createApp. This function is found on the Vue object, and it takes a configuration object.

[0:23] Throughout this course, we'll add different things to our configuration object, but the first thing we'll add is a data function. This data function returns an object, which are the properties that we want to be reactively available within our Vue application. In this case, let's make title available, and let's call it, comedy events.

[0:47] If I go to my console, I can see that that application has been defined. What we want to do is mount this Vue application onto an element in our HTML. Let's return to our index.HTML. Let's get rid of this Hi. Let's give this div an ID. Now, this ID can be whatever you want. People tend to choose app, or route, or some other clear indication of what's happening here.

[1:15] When we mount Vue, everything within this div is going to be accessible and able to access the Vue application. Let's do that. We're going to call app.mount. We pass the ID, where we want to mount our application. It's good practice to capture that mounted application in a variable in case you want to refer to it later, but it's not necessary.

[1:42] Our application now is mounted on this div. To prove that that's true, I'm going to reach into Vue, and render that title prop that we parsed in. To do that, I use double curly braces. I name the variable I passed in my configuration object, which was titled, and we can see that that title has been rendered to our DOM.

[2:06] As I change the title back here, instead of comedy events, let's have comedy event, the data is parsed into Vue, and then it rendered to our DOM. This is an example of binding our data to our DOM.