Vue 3 Fundamentals: Setup, Instances, and Reactive Data

Learn about the Vue 3 instances and reactive data.

We'll cover the following

Getting started

Let’s walk through the basics to get to know Vue and see how it works. To get a feel for what we can do with the framework, we’ll start with a static HTML page and add some basic interactivity with Vue.

As an example, we’re going to use this fictional employee directory.

Vue instance

Vue instance is a self-contained, reactive unit in Vue that represents a part of our web application. It combines the HTML template, the JavaScript data, and the methods to control the behavior of a specific part of the application. Vue instances are responsible for managing and rendering a specific portion of the web page, making it interactive and dynamic based on the defined data and logic.

To get started, let’s load the Vue library from a CDNCDN stands for Content Delivery Network and represents a group of servers spread across the globe.. For simple use cases, like adding some interactivity to existing websites, this will get us up and running quickly without having to introduce a build step. Add the following script in index.html file below the <body> section:

 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>

Next, we need to create a new Vue instance:

 Vue.createApp({}).mount('#main');

So far, we’ve simply instructed Vue to establish an instance and oversee a specific section of the DOMThe Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. identified by the #main selector, which it will utilize as a template for rendering content.

It will parse this chunk of HTML, looking for expressions that are part of the template language and binding them to our instance data where applicable.

Development vs. production version: The development version outputs helpful warnings in the console to help us avoid common pitfalls and integrate with the Vue devtools. In production, we’ll want to switch to the minified version vue.global.prod.js, which is approximately 42KB gzipped.

Reactive data

To be able to do something useful with our Vue instance, we need to give it some data. We do this by defining a function called data(), which returns an object containing all the data we want Vue to work with. Any properties assigned to the returned object (including nested objects and arrays) become reactive, meaning that Vue will observe them and automatically rerender the UI when they change.

Let’s add some example data to our instance:

In the code above, we added a <template> section. This is a section in a Vue component where we define the structure of the component’s HTML markup. It represents what will be rendered in the component when it’s used on a web page. The template can include HTML elements, Vue directives, and placeholders for data or computed properties that we want to display in the component. Vue uses this template to create the actual HTML that will be injected into the DOM when the component is rendered. This is just to make the code executable for confirmation that we’ve successfully added data in our instance.

  • Lines 4–26: We define the data() method of the Vue component, where we define the component’s data properties.

    • The properties added to the data object in the data() method must have initial values. These values are reactive and trigger updates in the UI when changed.

    • The return object: This contains the initial data for the component.

    • Lines 7–24: We define a data property named employees with an array value containing two objects. Each object represents an employee’s information, such as firstName, lastName, photoUrl, email, phone, and department.

Note: It’s possible that certain data we intend to update won’t be accessible to our instance during initialization, especially if it’s loaded via an AjaxAjax (Asynchronous JavaScript and XML) is a technology that allows data to be fetched from a server and updated on a web page without requiring a full page reload. request, for instance. It’s good practice to declare initial values for all our data properties because properties added later won’t be reactive by default.

This is how we can create a view instance and mount it with any DOM element to display the content. Again, it’s important to initialize all data properties with initial values because some data might not be immediately accessible during instance initialization, especially when loaded via an Ajax request.