Vuetable-2 cannot be mounted in Laravel 6

Question

I'm trying to use the Vue component Vuetable-2 in Laravel 6. I know the component says that it's made for 5.4, but I believe it should still work.

My app.js looks like this:

    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',
    });

The console reveals that the component could not be mounted.

[Vue warn]: Failed to mount component: template or render function not defined.

found in
---> <MyVuetable>
       <Root>

The view to where I'm trying to mount the component is the following:

(note that the example component does mount correctly)

@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

`require('./components/MyVuetable.vue')` -> `require('./components/MyVuetable.vue').default` — Ohgodwhy, Jan 10 '20 at 20:05

score 1 · Accepted Answer · answered Jan 10 '20 at 20:08

You need to require('path').default. The .default is necessary here because when you use require('path') you're just getting a JSON object back:

{ default: <VueConstructor> }

So no template or render function is defined within that object. However if you use .default then you will actually get back an SFC in this case which can be transpiled down.

The alternative would be to use import:

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

Or alternatively, with syntax-dynamic-import enabled:

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

Vuetable-2 cannot be mounted in Laravel 6

1 Answers1