teleport-code-generators
teleport-code-generators copied to clipboard
Vue Styleguide
I had a few discussions with some Vue experts (hello Bogdan Luca) and made a list of practices we should follow when generating Vue components. I'm leaving this here for now as research material, but this isn't an immediate issue to jump on, more like a reference we can keep for longer time. Perhaps we can move this to a separate .md file at some point
Links and ideas:
- For project structure - https://github.com/chrisvfritz/vue-enterprise-boilerplate
- We can implement the recommended eslint rules - https://eslint.vuejs.org/rules/
- Research the use of
v-model
to send state to child components (ex: in ModalWindow) - Custom events should be defined without
on
and handlers should be prefixed withon
- Always use
$emit
for sending a message to the parent component - Use computed props for dynamic styles (for performance)
- For more ideas - https://vue-community.org/ (we could also push the generators there)
Vue behaviors to consider:
- If you set a class to a custom component, it will get passed to the root element of the component, unlike in React when you need to explicitly send props.className
- If a class is specified as a direct parent for a custom component, and that custom component has a root element with the same class name (ex: 'container'), the style from the parent component will also be applied (https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements)