An Introduction to Vue.js Components

Components are great for those of us looking to harness the true power of Vue.js. If used correctly we can have clean, reusable code, which is what every developer really wants, right?

What is A Component:

The concept of components is not unique to Vue.js. You can find them referenced in many other javascript frameworks. In fact there is a term for this style of programming called component-based development, which is described as:

… a branch of software engineering that emphasizes the separation of concerns with respect to the wide-ranging functionality available throughout a given software system. It is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems.

In it’s simplest terms, you can compare components to Lego blocks. These blocks contain smaller pieces of code that handle specific features. If there’s one thing you can take away from this post, it’s that components make your code Readable, Reusable, and Reliable.

The Vue Component

A Vue component is just a Vue instance that is assigned to a custom tag-name and renders content in the template. For example, let’s create a simple component that displays a username.

The first argument in the component function is the tag-name my-user-greeting. When we want to use this component, we just add <my-user-greeting></my-user-greeting> to the template and it will render the code found in the second argument. It’s good practice to give a unique name to your tag. This prevents any tag conflicts from other components or packages installed on your application.

The second argument is the actual object that represents our component. It may look very similar to the object that we pass into the Vue Instance, but the data option is no longer an object but a function. This is because we want the data represented in the component to be specific to said component. We don’t want data that changes in our component to have side-effects changing data in other components.

This object accepts all options and lifecycle hooks that a normal Vue instance would accept, with the exception of el, which is not needed since our main Vue instance is already mounted to an element.

The Template Option:

In the above example you’ll see the template option. This option only accepts a string value, and is the markup for what you intend to render with the component. In our example, we are rendering a simple user greeting wrapped in <p> tags.

This option is pretty limited as we can only use a string. Sure we can pass data properties using text interpolation, but if we wanted to add nested HTML elements, this approach becomes cumbersome. Vue.js allows for single file components which will work great for medium to large projects, and my personal preference, but since this is just an introduction, I’ll save that concept for a future post.

Global vs Local Components:

Many of the applications you build with Vue will span over multiple directories and files. If you build a component with the intention to use it anywhere and everywhere, then defining it once will keep your code clean and easy to refactor.

In the first example, we define our component using Vue.component(), this makes the component available to be used globally throughout your app. Because this component is global, we can add <my-user_greeting></my-user-greeting> to any template in our app and the greeting will be rendered.

As you might expect, a local component is scoped only to the template it is referenced in. Let’s take a look at just one way to define a local component.

In the example we are working directly in a Vue instance and using another available option; components. This accepts an object which can have many components. The key in the object is the tag-name you wish to assign to your component. Then we pass an object which holds the template and data. In this case we just set the object to a variable outside the Vue instance.

Now <my-cmp></my-cmp> is available to be referenced, but only in the template which it is defined in. We could not use this component in other templates because it is out of scope.

Wrapping Up

Components offers us a a way to take complex code and simplify it down into organized, easy to read code. Hopefully this dumbs-down the concept of components. The first time I heard about them I felt slightly anxious and overwhelmed. But coming from a Rails background, they were easy to relate to partials. With a little practice, Vue components will begin to take form within your Vue applications, and you’ll never look back!

Learning Vue.js?
Want to follow along with my learning path? Check here for more posts about Vue!
(Visited 51 times, 1 visits today)