CODEWITHSUNDEEP
javascriptlaravelvue.jsfrontendlaravel-blade
sahar ahmed
sahar ahmed

Reputation: 59

vue.js template inside laravel blade

in our project, for templates for Vue.js, we write components in separate Blade files using x-templates like this:

<script type="x/templates" id="nameOfComponent">

The problem I have is that x-template content loading lately after other blade file content.

this is master.blade.php

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>@yield('title', 'base')</title>

    </head>
    <body>
        <div id="app">
            @yield('content')
        </div>
              
        <script src="{{ asset('js/app.js') }}"></script>

        @stack('scripts')
        @yield('script')

    </body>
</html>

and this is index.blade.php

test home page

<my-checkbox></my-checkbox>

@push('scripts')
    <script type="text/x-template" id="checkbox-template">
        <div class="checkbox-wrapper" @click="check">
        <div :class="{ checkbox: true, checked: checked }"></div>
        <h1>checkbox</h1>
        <div class="title">@{{ title }}</div>
        </div>
    </script>

    <script>
        Vue.component('my-checkbox', {
            template: '#checkbox-template',
            data() {
                return { checked: false, title: 'Check me' }
            },
            methods: {
                check() { this.checked = !this.checked; }
            }
        });
    </script>
@endpush

and this is app.js

window.Vue = require('vue');



window.addEventListener("load", function (event) {
    Vue.component('example-component', require('./components/ExampleComponent.vue').default);
    
    const app = new Vue({
        el: '#app',
    });
});

how can I make all content loading in the same time? thanks.

Upvotes: 1

Views: 2148

Answers (1)

White Link
White Link

Reputation: 106

Blade file is for server rendering and vue template is for client one, that's why it's "slower". In your case you may want to hide the page till vue finishes loading. Checkout the v-cloak directive. For more detail: https://v2.vuejs.org/v2/api/#v-cloak

Upvotes: 2

Related Questions