Vue.js 2 Design Patterns and Best Practices

Registering a component locally

We can also register our components locally within our application. This can be done by adding it specifically to our Vue instance, for example, let's comment out the global registration within main.js and then navigate to App.vue:

// Vue.component('fancy-button', FancyButton);

Before adding any code into our app component, notice that our button has disappeared now that we're no longer globally registering it. To register this locally, we'll need to first import the component similar to how we did before and then add this to a component object within the instance:

<template> <div> <fancy-button></fancy-button> <button>I'm another button!</button> </div></template><script>import FancyButton from './components/FancyButton.vue'; ...