What is a Vue Instance?

Please see the previous post How to Setup Vue JS in the continuation of this series.

The entry point of a starter vue application is a file called main.js which creates an instance of a JavaScript object called Vue that runs our app.

These "Vue instances" are the work horses of a Vue application, and in particular, an application's root Vue instance. The root instance is created by supplying an existing DOM element of a web page to the Vue constructor for it to mount onto. Similar to React, Vue uses this element as anchor to instantiate a virtual DOM containing information describing what kind of elements should be rendered on the page. As application state changes, the Vue instance "reacts" to these changes, and updates the real DOM by creating, removing or mutating elements in the tree. The mounting DOM element is supplied as a property (called el) as a part of a broader "options" object passed to a Vue constructor.

If you've worked in JavaScript you might be familiar with this convention. Because JavaScript is dynamic developers tend to use objects as arguments to methods and constructors in order to namespace arguments (as properties of the object) and avoid confusion. For example:

// Options argument - default is 10
function countTo(options = { limit: 10 }) {
	const limit = options.limit
	for (var i = 0; i< limit; i++) {
		//.. console log to the screen
	}
}

countTo({ limit: 12 })

We see the same pattern with the Vue constructor below:

<!-- An HTML file --> 
<div id='app'>
   <!-- Vue mounts on this div --> 
</div>

// A JS file
const app= new Vue({
	// The options object
	el: 'app'
})

This options object can contain a variety of properties spread across six categories including: Data,  Miscellaneous, Lifecycle Hooks, Assets, Composition, and DOM. You can read about them in Vue documentations, but, the common ones are those in data (e.g. data, computed, props, methods, etc), DOM (e.g. template, el, etc) and lifecycle hooks (e.g. created, mounted, updated, etc).

You can see what the default app created by our main.js file looks like by running yarn serve and navigating to http://localhost:8080 with the browser.

The default VueJS app on localhost:8080