Skip to main content

Vue – Code Guidelines

Less than 1 minute

Vue – Code Guidelines

We use single-file components

Each component lives in a single file, containing:

  • its template (the DOM structure)
  • its script (including props, data and methods among other things)
  • its style (defining the look of the component)

See the Vue.js docsopen in new window for more details.

Placed in the same folder are also:

  • the test file (e.g. MyComponent.spec.js)
  • the storybook file (e.g. MyComponent.story.js)

We use typed props

Vue.js allows us to define component props either as strings or as objects (with type and default or required values). Always go for the second option!

Also: only (and always!) define a default for props that are not required.

Why?

  • it makes our code more robust – a warning will be shown when passing a wrong prop type
  • it clearly defines the component API and tells other developers how to use it

It is as easy as writing:

props: {
  title: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    default: 'human-connection-logo.png',
  },
}

For more complex use cases see the official Vue.js documentationopen in new window.

We use shorthands

For better readability we prefer

  • :something over v-bind:something
  • @click over v-on:click
  • #slotSame over v-slot:slotName
  • #default over v-slot

Read more in the official Vue.js docsopen in new window (for slotsopen in new window)

The Vue.js component style guideopen in new window offers a whole list of best-practices for writing Vue components.