mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
60 lines
1.8 KiB
Markdown
60 lines
1.8 KiB
Markdown
# 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](https://vuejs.org/v2/guide/single-file-components.html) 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](https://vuejs.org/v2/guide/components-props.html#Prop-Validation).
|
||
|
||
## 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](https://vuejs.org/v2/guide/syntax.html#Shorthands) (for [slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand))
|
||
|
||
## Recommended reads
|
||
|
||
The [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props) offers a whole list of best-practices for writing Vue components.
|