Laravel Vue Component not being shown

Question

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

Do you have vue dev tools? You can check to see if the root instance has been created. Also if you are using vue 2 theready method has depreciated, you should use mounted or other lifecycle methods. — Phillis Peters
– Phillis Peters, Commented Feb 23, 2017 at 7:54
I have Vue 2.1.0, but still nto showing anything. Please help. — Castiel
– Castiel, Commented Feb 23, 2017 at 10:34

Peter Reshetin · Accepted Answer · 2017-02-23 08:03:50Z

1

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>

edited Feb 23, 2017 at 8:03

answered Feb 23, 2017 at 7:58

Peter Reshetin

9251 gold badge7 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jeremy Wright · Accepted Answer · 2020-04-09 12:27:50Z

0

I think you're missing the .default from the line

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

answered Apr 9, 2020 at 12:27

Jeremy Wright

7101 gold badge6 silver badges4 bronze badges

Collectives™ on Stack Overflow

Laravel Vue Component not being shown

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related