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.

adam adam · Accepted Answer · 2019-12-04T00: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.

Vue component rendering instead of Laravel Blade template

1 Answers