Vuetable-2 не может быть установлен в Laravel 6

Question

Я пытаюсь использовать Vue компонент Vuetable-2 в Laravel 6. Я знаю, что компонент говорит, что он сделан для 5.4, но я считаю, что он все еще должен работать.

Мой app.js выглядит следующим образом:

    require('./bootstrap');

    window.Vue = require('vue');

    Vue.component(
      'example-component',
       require('./components/ExampleComponent.vue').default
    );
    Vue.component(
      'my-vuetable',
      require('./components/MyVuetable.vue')
    );

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

Консоль сообщает, что компонент не может быть смонтирован.

[Vue warn]: Не удалось компонент монтирования: шаблон или функция рендеринга не определены.

найдено в

---> <MyVuetable>
       <Root>

view, куда я пытаюсь смонтировать компонент, выглядит следующим образом:

(обратите внимание, что пример компонента монтируется правильно)

@extends('layouts.app', ['activePage' => 'integracion', 'titlePage' => __('Integracion')])

    @section('content')
      <div class="content" id="app">
        <div class="container-fluid container">
          <example-component></example-component>
          <my-vuetable></my-vuetable>     
        </div>
      </div>
    @endsection

    @push('js')
      <script>
        $(document).ready(function() {

        });
      </script>
    @endpush

Answer 1

Вам нужно require('path').default. .default здесь необходим, потому что когда вы используете require('path'), вы просто возвращаете объект JSON:

{ default: <VueConstructor> }

Таким образом, в этом объекте не определена ни шаблон, ни функция визуализации. Однако, если вы используете .default, то в этом случае вы получите SF C, который может быть передан вниз.

Альтернативой может быть использование import:

import MyVuetable from './components/MyVuetable.vue'
Vue.component('my-vuetable', MyVuetable)

Или же, с включенным syntax-dynamic-import:

Vue.component('my-vuetable', () => import('./components/MyVuetable.vue'))