Локальная и глобальная регистрация компонентов в Vue

Компоненты могут быть зарегистрированы локально и глобально. Глобальные компоненты в отличие от локальных доступны для любого другого компонента в приложении Vue.

Глобальная регистрация

Глобально зарегистрированный компонент доступен во всём приложении:

main.jsimport Vue from 'vue'

Vue.component('MyButton', {
    template: '<button>Нажми меня</button>'
})

Теперь MyButton можно использовать в любом шаблоне вашего приложения.

Локальная регистрация

Локальная регистрация позволяет использовать компонент только внутри текущего родительского компонента:

components/MyButton.vue<template>
  <button>Нажми меня</button>
</template>

<script>
export default {
    name: 'MyButton'
}
</script>

App.vue<template>
  <div>
    <MyButton />
  </div>
</template>
<script>
import MyButton from './MyButton.vue'
export default {
  components: { MyButton }
}
</script>

Здесь MyButton будет доступен только внутри App.vue.