VueJS Naming Convention

VueJS Naming Convention

Source: https://namingconvention.org/vuejs/

List of covered sections:

• Component
• Smart vs Dumb Component
• Single instance Component
• Component Files
• Template Components
• Constant
• Method
• Variable

Component

PascalCase

• Begin with an uppercase letter
• Components names should always be multiwords like "AlertModal", "DropdownMenu" or "NavbarLogo"
• Child components should use the name of their parent as a preffix. For example a Form component child of AlertModal should be called AlertModalForm
• Avoid acronyms and abbreviations

export default {
  name: 'AlertModal'
}

Smart vs Dumb Component

Smart components sometimes called contrainer are the one that handles state changes. Dumb components, also called presentational, handles the look and feel. Dumb components are comparable to the View and Smart component to the Controller in the MVC pattern.

Dumb Component

• Starts with the prefix "Base", "App" or "V"
• For example "BaseButton", "AppButton" or "VButton" for a simple button
• Takes only care of the look and feel

Smart Component

• Takes the name of a dumb component but replace the prefix ("Base", "App" or "V") with another name
• For example "SubmitButton", "UserDeleteButton", "IncrementButton"
• Implements methods or are connected with the Vuex actions

<template>
  <div class="increment-button" v-on:click="increment">
    <base-button>{{ number }} Increment</base-button>
  </div>
</template>

<script>
// Base Button is dumb
const BaseButton = {
  template: `<button><slot></slot></button>`
}

// Increment Button is smart
export default {
  name: 'IncrementButton',
  components: { BaseButton },
  data () {
    return {
      number: 0
    }
  },
  methods: {
    increment () {
      this.number++
    }
  }
}
</script>

Single Instance Component

Single Instance components are the ones that are used only once per view. For example the logo, the navbar, the side menu.

PascalCase (starting with The)

• Start with The
• Should be used only once per view
• For example TheNavbar, TheFooter, TheSideMenu, TheLogo

export default {
  name: 'TheFooter'
}

Component Files

PascalCase

• Begin with an uppercase letter
• One component per file only
• The file extension should be .vue or .js

components/
|- HomeHeader.vue
|- HomeCallToAction.vue

Template Components

PascalCase

• In single-file components, string templates, and JSX

• Should be self closing

• For example

  ,

kebab-case

• In DOM templates
• Should never be self closing
• For example ,

<template>
  <div>
    <HelloWorld/>
    <share-button></share-button>
  </div>
</template>

Constant

SCREAMING_SNAKE_CASE

• Should be all uppercase letters e.g. MAX_NUMBER_PEOPLE, PRICE
• If the name contains multiple words, it should be separated by an underscore(_) such as DAYS_IN_WEEK
• It may contain digits but not as the first letter

const MAX_NUMBER_PEOPLE = 42

Method

camelCase

• Begin with a lowercase letter
• Preferably a verb e.g. getName(), buy(), count()
• If the name contains multiple words, start it with a lowercase letter followed by an uppercase letter e.g. getXmlParser()

export default {
  methods: {
    getName () {
      return 'Hello World'
    }
  }
}

Variable

camelCase

• Begin with a lowercase e.g. id, name.
• If multiple words: start it with the lowercase letter followed by an uppercase letter e.g. lastName, phoneNumber
• Avoid using underscore or dash
• Avoid one-character variables e.g. a, b
• Cannot start with a number

let phoneNumber = '0011553368'