Components, components, components!
When the idea first started gaining traction back in the AngularJS days, frontend devs got really excited and with any new technology, devs pushed components to their limits by making every bit and piece of their application a component. There are many approaches to “componentize” an application but what are they?
The three kings of frontend JavaScript
These are by far the most popular frontend JavaScript frameworks out there, each one taking their own approach to components but at the end of the day they are approaching the same problem differently
How does Vue approach components?
Vue has two ways of defining components, using Vue.component()
method or .vue
files
NB! I won’t go through every vue component concept there is but if you would like to go in-depth check out Vue Component Basics
Vue.component()
This approach does not require use of webpack, all you need to do is include Vue via cdn and you can start making components
The my-button-counter can be reused in the application
Vue files 😮
This approach does require webpack because .vue
files cannot be executed directly inside a browser. Webpack can help us compile the .vue
files to regular JS. So what does a .vue
file look like?
Okay i have created MyButtonCounter.vue
but how do i use this component? Firstly we need a .vue
file entry point for our application, the convention is to call it App.vue
Have you noticed that Vue files resemble web components? Vue was inspired by a lot of technologies before it, maybe you could spot them and leave a comment 😉
NB! I won’t be going to cover the internals of how .vue
files are compiled, you can check out Vue Loader
Can you spot the similarities between Vue.component()
and .vue
files approach? The object passed as an argument to the Vue.component()
method is the same as the exported object in the script tag of MyButtonCounter.vue
file. The object has the same properties with the exception of the template
property
NB! I will be focusing on .vue
files instead of Vue.component()
approach from now on
Types of Vue components
Single-instance components
These a very basic components, they don’t take props and they are rendered once in your application
An example of a single-instance component would be a toolbar in a SPA
The toolbar stays consistent throughout the application but the views change
If you are creating a single-instance component, it's a convention to prefix it with The
in Vue
components/
|- TheNavigationBar.vue
|- TheBottomBar.vue
Multi-instance components
These components are the opposite to single-instance components. They are used multiple times throughout the application and are configurable through the use of props
Here is a simple TextField
component
Layout components
These components provide a wrapper for all components or regular html nested within. These components generally make use of slots, which provides room for other developers to “slot” there own markup into the component
Basically Menu.vue
is a wrapper for ul
and MenuItem.vue
is a wrapper for li
also both components have scoped css for styling
Why don’t you just use
ul
andli
directly?
Its due to semantics, menu
and menu-item
is far more readable than just ul
and li
tags. Essentially you could treat your entire application using layout components to make your markup more readable
If you are creating related layout components, it’s a convention to prefix it with the name of the root component
components/
|- Menu.vue
|- MenuItem.vue
|- MenuItemCard.vue
|- ...
Layout components are great but there are some pros and cons:
Pros
- Readability
Cons
- Higher overhead (more components to manage)
- Higher bundle sizes
NB! These are the basic types of components you would find in most Vue applications but these are not the only ones
So when do you decide to make a component?
So here’s the deal, i built a simple Todo App with Vue. Here's a link to the demo and GitHub repo
Youtube series
So after a lot of consideration i have decided to create a youtube series on taking the todo app and splitting it up into components, everything that i do in the videos are not scripted and are completely done on the spot
My original intentions was to code the solutions beforehand and document my thought process but i figured that would be boring and not as intuitive as creating some simple videos
You can check out the playlist when to “componentize” from the point of Vue on YouTube
I’ll be posting a new video to the playlist on a daily basis, so please subscribe to get the latest videos
If you would like more content like this, please don’t hesitate to leave a comment. I hope you enjoy the content
If you loved this article and if you feel like it was helpful to you, then why not help someone else by sharing this article with them 😄
Contact details
You can contact me through the ZA-Tech Slack group @shailen
Discussion (0)