Vue

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.

SCSS

Testing Guide

Last modified 3yr ago