Module based development

Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.

Reusable accross the project

When we create a module, we can use it across multiple files. This will make it easier to maintain the code because you only have to change it in one place.

Make your project, well, modular

Developing modular parts for our application can reduce it’s complexity and make it easier to maintain the separate modules. Small groups can be responsible for maintaining certain modules without having to really interact with other parts of the application.

Smart vs dumb components

Smart components are also called containers, they are the ones who handle the state changes, they are responsible for how things work. On the opposite, the dumb components, also called presentational, only handle the look and feel.

Let’s say you have a dumb card component BaseCard.vue

If you have a smart component that uses BaseCard and adds some methods to it, you can for example name it:

• ProfileCard
• ItemCard
• NewsCard

Child components should include their parent name as a prefix. For example if you would like a Photo component used in the ProfileCard you will name it ProfileCardPhoto. It’s for better readability since files in a folder are usually order alphabetically.

Basic Example

Bad

// OneComponent.vue
<template>
  <div>
    <button
      class="bg-blue text-white"
      @click="doThing"

      Click Me
    </button>
  </div>
</template>

// AnotherComponent.vue

Good

// BaseButton.vue
<template>
  <button
    class="bg-blue text-white"
    @click="$emit('click')"

    <slot />
  </button>
</template>

// OneComponent.vue

// AnotherComponent.vue