Vue.js 2 Design Patterns and Best Practices

Registering components globally

We can create components and register them globally with the following interface: Vue.component(name: string, options: Object<VueInstance>). Although it isn't required, when naming our components it's important to adhere to the naming conventions set by the W3C Custom Elements specification (https://www.w3.org/TR/custom-elements/#valid-custom-element-name), that is, all-lowercase and it must contain a hyphen.

Inside of our main.js file, let's register our FancyButton component by first importing it from the appropriate path:

import FancyButton from './components/FancyButton.vue';

Afterwards, we can register the component using Vue.component, which can be seen in bold, making the resulting code inside of main.js ...