Как добавить атрибут name в компонент vue с ошибкой?

Question

Я получаю сообщение об ошибке на скриншоте.

Как мне указать атрибут name для этого кода в моем app.js?

app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('table-logs', require('./components/TableLogs.vue').default);

const app = new Vue({
    el: '#app'
});

TableLogs.vue

<template>
    <vuetable ref="vuetable" 
        api-url="https://vuetable.ratiw.net/api/users"
        :fields="['name', 'nickname', 'email', 'gender']" 
        data-path=""
        pagination-path="">
    </vuetable>
</template>

<script>
    import Vuetable from 'vuetable-2'

    export default {
        components: {
            Vuetable
        }
    }
</script>

Answer 1

Я не знаком с тем, как Laravel и Vue работают вместе, но в типичном проекте, созданном Vue CLI, вы добавляете свой корневой компонент с помощью функции рендеринга. Например

<div id="app"></div>

// app.js
require('./bootstrap'); // I imagine this is required

import TableLogs from './components/TableLogs.vue'

new Vue({
  render: h => h(TableLogs),
}).$mount('#app')

Answer 2

Укажите атрибут "name" в вашем компоненте.

`import Vuetable from 'vuetable-2'

export default {
    name: 'myTestComponent',
    components: {
        Vuetable
    }
}

`