Search code examples
laravelcomponentsshowvuejs2

Laravel Vue Component not being shown

I'm stucked with this code. I can't make it work, and i don't get any errors. Which might mean that i need an aditional dependency? It's simply not showing. Please help me. Thanks.

app.js - file

Vue.component('message', require('./components/Message.vue'));

const app = new Vue({
    el: '#app'
});

Message.vue - file

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Message</div>
                    <div class="panel-body">
                        I'm the component!
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        ready () {
            console.log('Component ready')
        }
    }
</script>

home.blade.php - file

@extends('templates.default')

@section('content')
    <h3>Welcome to Site</h3>
    <div class="container">
        <div id="app">
            <message></message>
        </div>
    </div>
@stop
Solution

  • You may also need to clear browser cache when working with frontend. On mac this is command + shift + R. Also make sure you did run gulp to compile your js file.

    Also make sure you included compiled js file to your layout template before </body>:

    <script src="/js/app.js"></script>