Before you can truly begin to understand Vue Components, you must first understand the Vue Instance. Which is just a JavaScript object that attaches itself to a section of your HTML page, and that initiates the Vue functionality and allows it to run through that section of the page.
In the days when jQuery was most popular, the best way to give a webpage some dynamism was to simply overtake the page with moderate functionality. document.ready function anyone? And then once that was done, to simply bind and then interact with any areas of the page that you needed to.
The problem with this method is as the web’s complexity has increased, and therefore needed more complexity in terms of UI, tools like jQuery, which typically dealth with various sections of the page at once, sometimes with various sections sharing functionality, were now ending up a spaghettified mess. This because there was no modularization and clear seperation of concerns.
Modules prevent spaghetti code.
VueJS and ultimately, Vue Components are a modularization of the previous method of adding interactivity to a webpage. It allows you to target just the segment of the page you need, therefore being able to concentrate more complexity in terms of functionality within that specific area. Ultimately building up a collection of powerful sections that together create a powerful, performant webpage.
Vue Components are simply Vue Instances that you can name and single out specifically, in order to be able to use them in a more modular, flexible fashion. Basically, Vue Components are Vue Instances that you can move around and/or reuse within your UI. Wherever you may need them to be.
They are, if thought of in another way, simply reuseable abstractions of Vue Instances.
Why Vue Components Are Needed
Increasing webpage complexity has over time been met by increasing functionality, as well as modularity, in order to manage that complexity. This means that section by section, the webpage has been made to handle as well to do, more for the user over time. These sections of the page have gradually evolved to become full blown UI modules with the help of JavaScript. With each module within a webpage having more individual power, in order to gradually together increase the power of the entire webpage.
Said another way, webpages have become a bundle of mini-apps. Each section of the page representing not just a paragraph section or a bunch of images, but now representing a complete, modularized mini-application in its own right. In Vue, these are our modularized Vue Instances, or as we’ve named them above, our Vue Components.
Vue Components are a style of creating one of these mini-apps on your page. They are the mini apps that VueJS has developed for us to use.
How Vue Components Work Within The Context Of A Webpage, And A VueJS App
Since Vue Components are simply modularized, abstracted Vue Instances, let’s first start with a Vue Instance and and then build our understanding of Components from there.
A Basic Vue Instance On A Webpage
<div id='app'>{{ someText }}</div>
new Vue({el: '#app' data: { someText: 'helloThereText' }})
Things on the web tend to cascade into other things. A ‘web’ as a thing in and of itself is a sort of inverse cascade. So in the same vein, the technologies on this sort of structure will inevitably operate in the same way.
With all technologies used on the web, there is always a root source, or a root initiator. Just like with a spider web, there is a root point where the web began to grow.
VueJS is no different.
When we create our Vue applications, no matter how big or complex they become, the root Vue instance will always be our starting point and where everything in our app, including our Vue components, runs through.
So with this in mind, we will now create our Vue Component.
Creating a Vue Component
Creating a component in Vue is as simple as registering it within Vue and then within your root instance. There are, infact 4 different ways of creating a Vue Component, which are mentioned in the previous link.
But for the purposes of this article, and for simplicity, we will only be covering what we believe is the simplest way. That is to register a Vue Component with a template inside of it.
The way we do this can be seen below:
<div id="app"></div>
const HWComponent = {
template: `<h1>helloThereText</h1>`,
}
new Vue({
el: '#app',
template: ` <div> <HWComponent/> </div> `,
components: {
HWComponent
},
});
Here you can see, we’ve simply replaced our data object with a ‘template’ declaration, where we specify the structure within which our component should be held.
Below that we specify our component. Or components, depending on how many we would like to use.
The registered component, defined in our above const ‘HWComponent’, is now holding our data, the text that is to be displayed.
For most complex Vue apps and projects, the structure as well as the usage of components, is usually within the context of many other components. All of these being routed through a root App.vue component. Which is then also routed through the final, non-component root Vue Instance.
The creation and management of these more complex Vue apps is done via tools like the Vue CLI. You can learn more about that and of how components are usually used within the context of a real world project here: What Is The Vue CLI – A Mini Crash Course Guide.
For now, this short crash course guide should give you a decent enough glimpse of what exactly Vue Components actually are. And how to create them.
From this foundation, you can hopefully go on and continue to build your knowledge base with regard to Vue Compenents, and, to VueJS as a Framework overall.
To be the first to know when we publish a new post or book, you may also subscribe to our email list below