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.
