Understanding Application Structure Of Vue.js

In this article, we will learn the conceptual application structure of Vue.js applications. We will dive deep into how any Vue.js application works.

Before going through this article please keep in mind that it is expected to have a basic understanding of Vue.js applications. It would be helpful if you have knowledge about setting up the environment for creating Vue.js applications. There are multiple ways in which you can get started for setting up the environment. The knowledge of creating a basic Vue.js project would be a plus point. Don’t worry if you are not familiar with all these steps, you can read this article Getting started with Vue.js to have a clear understanding.

As per Vue documentation, we already have an idea that Vue is a progressive framework that is used for building user interfaces. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

We have created our first Vue.js application in the previous article. Now let's understand concepts of how any of the Vue application works. The HTML that we have in our template of the App component will be rendered first but all of the other things required would be set up when we create our new Vue instance.

Every Vue application only has a single Vue instance and that’s why it is also known as the heart of the Vue.js application. A Vue instance will be created whenever we call the new Vue function.

The latest version of Vue.js is v3 and we also know that there are a lot of updates in Vue v2 and Vue v3. So, there are also updates in creating Vue instances. In version 2 a new instance is created on calling a new Vue function whereas in version 3 a new Vue instance is created on calling a function createApp.

We will not spot the differences in both the versions in detail but generally, an instance is used to register 'globals' that can then be used by components within that application. When you create a Vue instance, you pass in an options object when working with version 2. Working with version 3, options are passed to createApp function to configure the root component. The root component is used as the starting point for rendering when we mount the application.

Diagramatic idea of how a Vue application is structured is given below. The Vue instance that we created is the base of the Vue application which consists of an App component that we mount into a DOM element. A Vue application consists of a root Vue instance created with new Vue or createApp function(s), optionally organized into a tree of nested, reusable components.

Creating a new Vue instance generally means an instruction for the Vue application to render a component, generally, it is the App component. It doesn’t mean that our application will consist of a single app component but the App component will be the root component consisting of other components as child components.

Creating Vue instance in Version 2

var vm = new Vue({
// options
})

Here variable vm is a short notation for ViewModel. There are various ways in which we can pass options while creating a Vue instance so that we can have the desired behavior of our application. Referring to Vue’s official site, Vue was inspired by the MVVM pattern.

What is MVVM?

Model–View–ViewModel (MVVM) is a software architectural pattern that facilitates the separation of the development of the graphical user interface (the view) – be it via a markup language or GUI code – from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform. The view model of MVVM is a value converter, meaning the view model is responsible for exposing (converting) the data objects from the model in such a way that objects are easily managed and presented. Source: Wikipedia

Creating Vue instance in Version 3

const app = Vue.createApp({
/* options */
})

As we are already aware that to create a Vue instance in Vue 3 we use the function createApp, where we can register “globals” that can be used by the rest of the components in our application.

What are components in Vue.js?

A component is not generally a Vue instance but components are reusable Vue instances to which we can provide names. Generally, the components are used inside the root component of the application.

Components are characterized with template and logic with data flowing from the logic to the template and events emitted from the template to the logic.

Let’s have a look at the root component of our application so that we can have an idea of how the application is mounted and how the component actually looks like.

The component in the image above is known as the Single File component. A single file component consists of 3 sections first is the “Template” section which contains the HTML that will be rendered when our component gets mounted. Second, is the “script” section that JavaScript codes such as the variables and the events, and the third section “style” has the styles for the component. So we can have our components' HTML, CSS, and JavaScript code live in a single file with a .vue file extension.

The component passed into the createApp function is used as the root component of our application and it is used for rendering while mounting the application. If we want to separate our CSS and Javascript code Vue also supports it.

What are local and global components?

A local component is a component that is available where it is created or where it is imported in another context. The single-file component that we have seen above is an example of the local component.

Vue also provides us functionality to create global components that can be used anywhere in our application without the requirement to import/export the component.

Example of creating a global component referred from the official site,

// javascript code
const app = Vue.createApp({})
app.component('component-a', {
/* ... */
})
app.component('component-b', {
/* ... */
})
app.component('component-c', {
/* ... */
})
app.mount('#app')
// HTML code
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>

One of the main disadvantages of globally registering components, if you're using a build system like Webpack, globally registering all components, means that even if you stop using a component, it could still be included in your final build. This unnecessarily increases the amount of JavaScript your users have to download.

The solution for not including unnecessary javascript for your users is to define the components as plain javascript objects. This would help us as locally registered components are not also available in subcomponents.

Summary

After reading this article we have a clear understanding of the conceptual application structure of Vue.js applications. We also have an idea about the pattern by which Vue.js was inspired. We also have an understanding of the Vue components as well as local Vue components and global Vue components.

Feel free to provide feedback for this article. You can also post the next topics you want to explore in the comments