Vue
Last updated
Was this helpful?
Last updated
Was this helpful?
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 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
)
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:
For better readability we prefer
:something
over v-bind:something
@click
over v-on:click
#slotSame
over v-slot:slotName
#default
over v-slot
For more complex use cases see the .
Read more in the (for )
The offers a whole list of best-practices for writing Vue components.