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 docs 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 documentation.

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 docs (for slots)

Recommended reads

The Vue.js component style guide offers a whole list of best-practices for writing Vue components.