Как динамически подгружать компоненты во vue?

Question

[GizzaProger]

У меня есть панель инструментов. Я хочу разделить ее на категорию. Каждый инструмент это определенный компонент. Инструментов много.
Я хочу написать js объект в котором буду указывать массив инструментов, их названия, категорию инструмента и прочее.
Как я могу динамически при помощи списка инструментов загружать их в панель и регистрировать как vue компоненты?

Answer 1

[Александр]

https://ru.vuejs.org/v2/guide/components-dynamic-a...

Где то на этом сайте даже примеры были )))

Comments

[Александр]

Черновой пример
В vue пишем:

<div>
<ul>
<li
v-for="item in items"
v-bind:key="item.id"
v-on:click="CurrentComponent = (item.component)"
>{{ item.name }}
</li>
</ul>
</div>

<div>
<component v-bind:is="CurrentComponent"></component>
</div>

import Page1 from './Page1';
import Page2 from './Page2';

data() {
    return {
items: [
        {
          id: 10,
          component: Page1,
          name: 'Page1',
        },
        {
          id: 20,
          component: Page2,
          name: 'Page2',
        },
CurrentComponent: Page1,
}
}

Переменная CurrentComponent при on:click меняет компонент.