Unsure about how to organize your Vue.js components? Learn in this tutorial how to do it using Atomic Design methodology. Examples and demos included!

In this article I will explain what the Atomic Design methodology is about and how we can apply it to our Vue.js project.

To give style to the example I created in this codesandbox, I have used TailwindCSS with its default configuration.

What is Atomic Design

All the theory we are going to see below is in depth in the book Atomic Design by Brad Frost

As Brad Frost says ‘Atomic design is like mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time’.

Atomic design is a methodology for creating design systems chemistry-based and there are five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates and Pages. Let’s see them in depth.

Atoms

It is the smallest unit that composes our application, it is not useful by itself but it allows us to have more control over the application elements.

Imagine that you want to create a basic layout, in it there will be a header, a body and a footer. But, in addition, each of them is made up of smaller elements such as the links you can see in the header and also in the footer.

Well, we’re talking about the atoms being the HTML tags that will be reused throughout the application, as link, heading and svg, among others.

For this example we have defined five atoms that will be useful to us:

AtomButton.vue

As you can see, it’s simply a button-style link that expects a property that will contain an object with the name and url of our link.

<a
    :href="link.url"
    class="block text-center py-1 px-4 bg-blue-100 text-blue-500 font-semibold rounded"
>{{ link.name }}</a>

AtomLink.vue

The atom that represents our link will be the same as the previous one but with the base style.

<a :href="link.url">{{ link.name }}</a>

AtomLogo.vue & AtomText.vue

For the logo we will add the SVG that represents it and for the text we will add the tag

.

<!-- AtomLogo -->
<svg width="48" height="48" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  …
</svg>

<!-- AtomText -->
<p class="pb-6">{{ text }}</p>

AtomTitle.vue

In this case, as the title can have more than one type of tag, h1, h2, …, we have created a dynamic component to be able to represent the corresponding title introduced by the prop: tag.

<template>
  <component :is="tag" class="text-3xl font-serif pb-2">{{ content }}</component>
</template>

<script>
export default {
  name: "AtomTitle",
  props: ["tag", "content"]
};
</script>

Now that we have reviewed all the atoms needed for our template, let’s get on with the molecules!

#vue #tailwindcss #atomic