Как правильно глобально зарегистрировать компоненты Vue?

Question

[mirikkingg]

Как правильно глобально регистрировать компоненты?

Есть следующий компонент:

<template>
      <header class="nav container-fluid pt-3">
        <h1 class="title">CCJ Music</h1>
        <h2>Charts</h2>
        <h2>Albums</h2>
      </header>
</template>
    
<script>
    export default {
        name: 'MainHeader'
    }
</script>

Он импортирован в js файле который находится в корневой папке с компонентами.

Туда так же попадут остальные компоненты и буду экспортированы как массив

import MainHeader from '@/components/UI/hard/mh.vue'

export default [
    MainHeader,
]

В main.js регистрирую все компоненты:

import components from '@/components/UI/library.js';

const app = createApp(App)

components.forEach(component => {
    app.component(component.name, component)
})

Все правильно регистрирует, но почему то при использовании его в экземпляре он не работает:


Вот экземпляр:

<template>

  <MainHeader></MainHeader>

</template>

<script>
export default {
  components: {
    // когда регистрирую его тут, он не может его найти, а если импортировать его, то какой тогда в этом смысл?
   // https://i.gyazo.com/bb84ef3ac0719c0d7155411debde9612.png
  }
}
</script>

Answer 1

[mirikkingg]

В файле App не получится использовать глобально зарегистрированные компоненты.
Моя проблема заключалась в том что я использовал KebabCase когда как в js необходимо использовать CamelCase, после этого в любом компоненты по мимо App.vue все компоненты можно использовать без импортов и прочей херни.

Answer 2

[Александр Медведев]

Попробуй другой подход.

1. library.js пусть экспортирует функцию, например:

import MainHeader from '@/components/UI/hard/mh.vue'

export default (app) => {
  app.component('MainHeader', MainHeader)
}

2. main.js

import components from '@/components/UI/library.js';

const app = createApp(App)

components(app)

Comments

[mirikkingg]

Так смысл library в том что он экспортирует компоненты, а не функцию, мы же не сможем удобно их использовать...

[Александр Медведев]

mirikkingg, почему не сможем? Это же глобальные компоненты)

[mirikkingg]

Александр Медведев, все равно бред, решение нашел.