I have a problem because template from Vue.js is not showing in blade.php
. I did all step by step from this tutorial https://www.itechempires.com/2017/10/laravel-5-5-vuejs-2-0-crud-operations-application/ and it's not working.
My code:
Roster.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Roster</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
}
}
</script>
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('roster', require('./components/Roster.vue'));
const app = new Vue({
el: '#app'
});
Roster blade:
@extends('layouts.admin.dashboard')
@section('content')
<task></task>
@endsection
I ran gulp watch and still nothing.
------------edit: Solution for problem was missing <div id="app"> </div>
Solution for problem was missing <div id="app"> </div>
and
<script src="{{ mix('js/app.js') }}"></script>
in blade file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.