With the latest version of our shopping cart built on top of Vue.js, I think it’s fair to say we’ve mastered this framework in the last few months.

And we still love it as much as the first day.

But we had to work our asses off to learn the ins and outs of Vue. Not that it’s a very complex beast. The learning curve is actually quite smooth. It’s simply that doing things the right way takes time.

That’s why we pride ourselves in crafting content that might help devs going down the same road we did.

We’ve written about state management, render functions, and PWA development (amongst other Vue-related matters).

Today, it’s all about Vue components. Starting from the basics, here’s what I’ll cover:

• What is a component?
• What are the building blocks of a Vue component?
• How to use them?

And I’ll finish it off with examples of Vue components in the wild!

No more time to waste, let’s dive right in!

What is a Vue component?

A component is a self-contained, reusable, most often single-responsibility, piece of UI logic.

Even though I’m using the wording “Vue component” here, it’s important to know that components aren’t specific to Vue.

Yes, Vue.js is what we call a “component framework”. But so is React, as well as the new kid on the block, Svelte.

The “component” approach is a way of structuring frontend development in a way that doesn't bloat the development experience. Most component frameworks have reactivity at their core, which benefits user experience, without sacrificing ease of use by developers.

Each component can have its own state, markup and style. The real magic lies in the fact that you can reuse a component as many times as you want. It then allows developers to build app organized into a tree of nested components:

Image taken from Vue.js official docs

You can probably imagine the amount of time saved by using this approach.

There are already hundreds of existent components out there that you can quickly import to your projects to perform simple to more complex tasks. You can find a comprehensive list on vuecomponents.com.

I’m over-simplifying the concept for now. You need to know that there are different types of components, which we’ll explore with examples further down.

First, let’s see what’s hiding inside these components.

The building blocks of a Vue.js component

When coding a component in a .vue file at the most basic level, you’ll find three sections available to put code in:

1. Template. Written in an augmented version of the templated language (HTML), it serves as a directive to the framework on how to produce the final markup of the component based on its internal state.
2. Script. Where the logic of the app resides. In that section are input low-level concepts such as:
3. Properties: A set of input variables used to configure a component's behavior. Properties are provided by the host application, or by a parent component. They can be data filters, sort orders, labels, visibility switches, etc.
4. State: This one’s optional, but often present. This is a data structure that provides the state of a component at a given time. The state of a component will change over time based on occurring events (clicks, scroll, DOM mutations).
5. Style. Where the CSS is placed.

Pretty simple right? A component in itself is indeed very straightforward. However, components then become building blocks for your whole app themselves. That’s where it can get a bit more complicated.

But don’t worry, I’ve got you covered.

→ Read the full post here