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
(includingprops
,data
andmethods
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
overv-bind:something
@click
overv-on:click
#slotSame
overv-slot:slotName
#default
overv-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.