Defining a Coding Component in Vue.js

A while ago, we wrote about Vue.js - a useful progressive javascript framework created as an alternative to Angular. Vue has proven to be great for building user interfaces. It is considered to be an approachable, versatile, and performant framework that helps developers create a more maintainable and testable code base.

Ask any skillful Vue developer and they will tell you just how much the component-based approach of this framework comes in handy when creating interfaces.

On today’s menu, we’re going to go a bit technical and share several different ways of defining a coding component in Vue.js.

What Are Components? What is Component-Based Architecture?

Before we dive in, we’ll take a moment to define components and the essence of component-based architecture.

Vue.js is not the only framework or language that relies on component-based architecture, and it’s certainly not the first one to adopt this concept. As a matter of fact, it was Facebook that first introduced component-based architecture in 2013, when they released React.js.

By definition, components are self-contained units of code that represent a logical block of one application. In this case, they are reusable Vue.js instances with a name.

User interfaces contain many different elements that exist within the same space, but are also independent from one another. For example, one app may have a chat function, and that’s a separate component. It might have a navigation bar, a special button, or a comment section - and those are all individual components.

Think of it like a human organism: our bodies have organs and each organ has its own function. But organs are still a part of a larger system. Just like doctors can address specific health issues and treat different parts of the human body, developers can isolate individual components and work on them without jeopardizing the rest of the application.

In a nutshell, thanks to the independent nature of each component - developers have the freedom to change them, reuse them, and have overall better control of the entire UI. This makes the coding experience more pleasant, it reduces time to market, and supports productivity.

What Are Vue.js Components Made of?

If you take a look at the single-file Vue.js components, you will notice they have three separate sections: its own HTML markup, script, and style for presentation.

Developers register components by doing Vue.component, passing the name as the first parameter, and the options subject as the second. In it, they can define a template for the component. They can then use that component inside of the root Vue instance.

Bear in mind that, if developers need to pass HTML to the components, they should use slots. If they need to pass data, props are the way to go.

To sum up: the template section is where developers can put their HTML markup code and variables. In the script section, they can register any child components and define local data, computed properties methods, etc. Style section is all about deciding how the components will be presented via CSS.

What is the Difference Between Registering a Component Globally vs. Locally?

There are two ways of registering a component: globally and locally. The above-mentioned way of registering a component (Vue.component) is global registration, which means that it makes the components globally available in the application.

Although it sounds neat, creating a global component is not always smart. You should think about the actual functionality you’re trying to create. By creating exclusively global components, the amount of JavaScript increases.

To avoid repetition and huge sizes of files that need to be downloaded, developers can define a component as a javascript object and register it where they need it.

By registering components locally, they can be used only within the chosen template. In case developers try to use it outside of the template, they will encounter an error message and whatever they inserted in the code won’t be displayed in the frontend.

It’s a good rule of thumb to register only essential components globally. In any case, Vue.js allows you to go back and optimize your application if you decide you want to organize components better.

What Are the Most Common Ways of Defining a Component?

There are several different ways of defining a component in Vue.js. However, the most common three are the following:

• Basic components (also known as inline components)
• Functional components
• Single-file components

Let’s go over these three types quickly.

With basic or inline components, developers define the component’s template inside the parent template by using the attribute inline-template.

Functional components are ultimately just render functions. Opposed to other components, functional ones don’t create Vue.js instances. They merely enable developers to make the most of the virtual DOM. This is why functional components might be a good option if developers need a reusable piece of code, but that particular app element doesn’t require reactive data.

Single-file components are arguably the most popular because of their versatility. If developers opt for this type of component, they can keep component definition in one file and then simultaneously write markup. It’s worth mentioning that single-file components have great runtime performance.

How to Properly Name a Component?

Before naming a component in Vue.js, developers should consult this official style guide. This resource helps anyone explore what are the naming patterns and how to name the components properly. Because the naming conventions are defined, developers that work on group projects can navigate the component files easier.

Here are some of the things developers should bear in mind when naming their components:

• Component names should always be multi-word, with the exception of root app components (this prevents conflicts with HTML elements which are all single words)
• Base component names should start with a prefix (e.g. Base, App, V.)
• Single-component names should always begin with ‘the’ as a prefix
• Child components that are tightly linked with their parent should include the parent component name as a prefix
• Components names should start with the most general words and end with descriptive modifying words
• Component names should consist of full words opposed to abbreviations

For full explanation and concrete examples of good and bad practices, check out the above-linked style guide on Vue.js official website.

What Developers Need to Know About Vue.js Component Lifecycle Hooks?

Once Vue instances are created, each of them goes through a series of initialization steps. Along the way, each instance runs functions called lifecycle hooks. This allows developers to add their own code at specific stages and run it in that particular part of the application.

If you check Vue.js Lifecycle Diagram, you will see which hooks will be triggered and in what order.

The first one is ‘beforeCreate’ and then Vue calls the ‘created’ hook. After that, it decides if and how to mount the instance in the DOM. When this is done, it calls the next hook (‘beforeMount’) and the ‘mounted’ hook as well once the template is rendered.

When the data changes, hooks ‘beforeUpdate’ and ‘updated’ are triggered. Afterwards, when the component is about to be destroyed, the ‘beforeDestroy’ and ‘destroyed’ hooks get triggered.

This is just the basic theory, of course. Developers are encouraged to explore the Vue.js documentation and the API section for more details on advanced practices.

Final Thoughts on Coding Components in Vue.js

Developing in Vue.js is amazing because its component-based architecture enables controlled application altering and various integrations.

From the client point of view, Vue.js is great because it reduces the costs of development and maintenance. The fact that code is reusable also increases the level of reliability and it simplifies the maintenance process for specific elements. In addition, existing versions can be easily replaced without disrupting the code and causing complications in the overall app functionality.

If you want to make the most of Vue development and you need a helping hand for your project, search no more: ontact Share IT to get a cost and estimation.

While you’re here, check out how we handle service delivery management and ensure our clients are always heard and well taken care of.