Vue Styleguide

[alexnm]

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 with on
• 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)