Vue breaks DataTables and Pace JS

Question

Running Vue 2.5.16 with jQuery DataTables 1.10.15 and Pace JS 1.0.2.

When I add the <div id="app"></div> wrapper to my root page layout, Vue components work but DataTables won't actually show the table data even tho the AJAX table data is valid.

Pace JS will sometimes overlay the entire screen in a grey overlay after some AJAX requests that load data that is big enough to push the render below the fold.

All I have to do is remove id="app" to fix either of these problems.

There are no errors in the console.

None of my DataTable instances integrate any Vue components. All Vue components are on entirely different pages than those of the DataTables.

All Pace JS pages have no Vue components.

My root Blade template code:

<body id="page-top">
@if(Auth::check())
    @include('layouts.navigation')
@endif

<div id="page-wrapper" class="gray-bg">
    @if(Auth::check())
        @include('layouts.topnavbar')
    @endif
    <div class="wrapper wrapper-content" id="app">
        @yield('content')
    </div>

    @include('layouts.footer')
</div>

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{!! mix('js/app.js') !!}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
</body>

My DataTables initialization script:

@push('scripts')
    <script>
        $(function () {
            $('#plans-table').DataTable({
                dom: '<"html5buttons"B>lTfgitp',
                pageLength: 25,
                scrollX: true,
                colReorder: true,
                processing: true,
                serverSide: true,
                deferRender: true,
                stateSave: true,
                ajax: '{!! route('plans.data') !!}'
            });
        });
    </script>
@endpush

Example edit.blade.php page which holds a simple component:

@if(Auth::user()->can('edit-plans'))
    <edit-plans
            :plan="{{ json_encode($plan) }}"
    ></edit-plans>
@endif

My Vue initialization in app.js:

window.Vue = require('vue');

Vue.component('edit-plans', require('./components/plans/edit.vue'));

window.onload = function () {
    const app = new Vue({
        el: '#app'
    });
};

Currently integrating all of this in Laravel 5.4 if that makes any difference.

What could be causing this?

skribe · Accepted Answer · 2018-03-21 07:44:01Z

0

If you have left Laravel / Webpack in its default fresh install state, I believe you will find that the bootstrap.js file is already loading jQuery globally. My guess is that since you are loading jQuery in your root page footer the fact that it is loading twice is causing your issue. When you remove your Vue instance <div id="app"></div> then you are only loading jQuery once and things work again.

So see if simply removing your CDN <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> fixes the issue for you.

If the included jQuery version is not new enough then updated it using npm.

answered Mar 21, 2018 at 7:44

skribe

3,6254 gold badges29 silver badges36 bronze badges

Unfortunately that didn't fix the problem.
– eComEvo
Commented Mar 21, 2018 at 11:38
The DataTables code still executes and makes the AJAX call to load the data, but the table data never appears after the XHR request completes.
– eComEvo
Commented Mar 21, 2018 at 12:32

Add a comment |

Collectives™ on Stack Overflow

Vue breaks DataTables and Pace JS

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related