diff --git a/webapp/vue.md b/webapp/vue.md index 5116bd713..2485e99e6 100644 --- a/webapp/vue.md +++ b/webapp/vue.md @@ -3,6 +3,7 @@ ## 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) @@ -10,6 +11,7 @@ Each component lives in a single file, containing: 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`) @@ -20,6 +22,7 @@ Vue.js allows us to define component props either as strings or as objects (with 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 @@ -43,11 +46,14 @@ For more complex use cases see the [official Vue.js documentation](https://vuejs ## 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) +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. +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.