Как в однофайловом компоненте зарегестрировать компонент?

Question

[Руслан Абсалямов]

У меня проблема в том, что если брать пример https://codepen.io/ratiw/pen/GmJayw там используют компонент

components: {
   'vuetable-pagination': Vuetable.VuetablePagination
  },

Но у меня находиться в однофайловом компоненте, то у меня так не получается, потому что vue не понимает имя в template. Как мне получить компонент пагинации?
Вот весь мой код

<template>
    <div>
        <Vuetable ref="vuetable"
                  :api-mode="false"
                  :fields="fields"
                  :data="items"
                  track-by="id"
        >
        </Vuetable>
        <!-- Чтобы применить компонент мне нужно понять как он будет называться-->
        
    </div>
</template>

<script>
    import Vuetable from 'vuetable-2';

    const columns = [
        '__checkbox',
        'email',
        {
            name: 'name',
            title: 'Наименование',
            sortField: 'name',
        },
        {
            name: 'phone',
            title: 'Телефон',
            sortField: 'phone',
        },
        {
            name: 'responsible',
            title: 'Ответственный',
            sortField: 'responsible',
        },
        {
            name: 'deals',
            title: 'Сделки',
            sortField: 'deals',
        }
    ];
    const items = [
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Купил' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Продал' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Купил' },
        { isActive: true, email: 40, name: 'Dickerson', phone: 'Macdonald', responsible: 'Макаров', deals: 'Продал' },
    ];

    export default {
        name: "BaseTable",
        components: {
            Vuetable,
//Вот тут встал в ступор
        },
        data() {
            return {
                fields: columns,
                items: items
            }
        },
        methods: {
            onChangePage (page) {
                this.$refs.vuetable.changePage(page)
            },
        }
    }
</script>

<style scoped>

</style>

Если что использую данную библеотечку https://ratiw.github.io/vuetable-2/#/Pagination

Comments

[Алексей Ярков]

//Вот тут встал в ступор

В ступор от того, что не смог заменить одну строку на другую?

[Руслан Абсалямов]

Алексей Ярков, заменял я эту строку, у меня пишет что не зарегистрирован компонент такой. Поэтому у меня ступор как делается это во vue

[Алексей Ярков]

Руслан Абсалямов, вообще странно, конечно. Сделайте песочницу, чтобы ваш пример воспроизвести.
Но сначала попробуйте так:

import Vuetable, { VuetablePagination } from 'vuetable-2'

// ...
components: {
    Vuetable,
    VuetablePagination
}
// ...

[Руслан Абсалямов]

Алексей Ярков, так не работает, уже пробовал

[Руслан Абсалямов]

Алексей Ярков, Странно но в песочнице все работает. Думаю если что попробую такой пример

import VuetablePagination from 'vuetable-2/src/components/VuetablePagination';

Answer 1

[Luke LikeSkywalker]

Наверное vuetable это плагин для vue? Тогда его надо подключить через Vue.use