When to "componentize" from the point of Vue

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 and li 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