Vue component rendering instead of Laravel Blade template
Question
I'm new to Laravel and Vue.js and am trying to setup Typescript with Vue + Blade. Whenever I visit my blade view it will only load the component without any of the blade template.
app.ts
import Vue from "vue";
import ListClubsComponent from "./components/clubs/list-clubs.vue";
new Vue({
el: "#app",
components: {
"list-clubs": ListClubsComponent
}
});
list.blade.php
@extends('templates.default')
@section('content')
<section id="clubs-container">
<h1>Clubs</h1>
<list-clubs :player="{!! $player !!}"></list-clubs>
</section>
@endsection
default.blade.php
<body>
<div id="app">
@include('templates.header')
<main>
@yield('content')
</main>
@include('templates.footer')
</div>
</body>
If I don't instantiate Vue on app.ts my blade template will load just fine. I only want to use Vue for components that will be loaded into my blade views.
1 answers
solution1
0 2019-12-04 00:18:20
Your Vue selector wraps all your content. Try wrapping only the components you want rendered with Vue using <div id="app"> :
@extends('templates.default')
@section('content')
<section id="clubs-container">
<h1>Clubs</h1>
<div id="app">
<list-clubs :player="{!! $player !!}"></list-clubs>
</div>
</section>
@endsection
You only have a small amount of markup in list.blade.php . You can probably just move the markup into your Vue component:
@section('content')
<!-- All markup is in Vue component -->
<div id="app">
<list-clubs :player="{!! $player !!}"></list-clubs>
</div>
@endsection
Edit : I researched this a bit further for my own curiosity, looks like the blade template may fail to render any content if a Vue component is failing somewhere with an error.
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.