This Tutorial builds off the starter application that we generated in the Getting Started with VueJS article.
In this tutorial, we are going to look at how you can work with components within your VueJS applications. We are going to start at looking at very simple components and then move on to your standard
.vue file components.
The official documentation for VueJS components can be found here: VueJS Components Guide
What is A Component?
A component within a VueJS application, is a self-contained unit of code that represents a logical block of your application. Like for example, say you had a dashboard with 4 distinct boxes showing 4 distinct metrics, you would typically want to make each of these 4 boxes a unique component.
The advantages of this are two-fold.
You could easily re-use these components in a different page by just inserting the component’s HTML tag into your other page and, ta-da, it’s there and working.
It also helps in terms of separation of concerns. You don’t want any changes you make in Component A impacting Component B. By having these defined as 2 separate components, you typically have an added level of safety when making any changes.
A Basic Component
Let’s start off by creating a very simple component. We can register this globally by using the
Vue.component(tagName, options) like so:
Should you wish, we can also register components locally instead of globally as we have done above. This makes the component only available within the scope of another instance and/or component by registering it with the
components instance option:
Once we’ve registered our component, we can then drop it into our VueJS application with the
The Data Function
In the previous tutorial, we created a Vue instance which featured a
data object with a
msg within it. One of the key things to note when starting to rearchitect your Vuejs to use components, is that
data must be a function within your components.
You can certainly still define
data as an object but you will see a number of error warnings in the console and a number of weird side effects in you application, such as one component impacting the data within another.
Now, whilst this is how you would define a basic component, I typically never use this method within my VueJS applications. If you are doing anything serious with VueJS then you will tend to find yourself using
.vue files to encapsulate your components.
One of the coolest things about VueJS is the fact that you can define a component in one
.vue file. This
VueJS seriously helps to minimize this and this encapsulation means that your project directories end up looking more succinct and cleaner and I’m a huge fan of that.
I would highly recommend using the vue-cli in order to generate your applications as it allows you to easily use
.vuefiles within your VueJS applications.
Below you’ll find a very simple component that lives within the
simple-component.vue file. It features everything our
Hopefully, this article showed you everything you need in order tow work with components within your VueJS applications. If you need further help then please let me know in the comments section below or by tweeting me: @Elliot_F.