Vue component not being rendered in blade file

0
votes

So I am trying to build a new Laravel app with Vue. For some reason, the example component that the app comes with works fine, but my own doesn't. Here's my file structure and code:

views/layout/vue.blade.php

<html>
<head>
<title>Skat</title>
</head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<body>
    <div id="app">
        @yield("content")
    </div>
    <script src="/js/app.js"></script>
    </body>
</html>

resources/views/vue.blade.php this is working fine!

@extends('layouts.vue')

@section('content')
    <example-component></example-component>
@endsection

resources/js/components/ExampleComponent.vue

<template>
    <div class="container">
        some stuff ..
    </div>
</template>

<script>
    export default {
      name: 'example-component',
      mounted() {
        console.log('Component mounted.')
      }
    }
</script>

resources/views/home.blade.php this is NOT working :(

@extends('layouts.vue')

@section('content')
    <home></home>
@endsection

resources/js/components/Home.vue

<template>
  <div class="container-fluid d-flex h-100 flex-column">
    test test
  </div> 
</template>

<script>
export default {
  name: 'home',
  components: {

  }
}
</script>

<style scoped>
...
</style>

routes/web.php

Route::get('/', function () {
    return view('vue');
});

Route::get('/home', function () {
    return view('home');
});

resources/js/app.js

...
import ExampleComponent from './components/ExampleComponent.vue';
import Home from './components/Home.vue';

const app = new Vue({
    el: '#app',
    components: {
      ExampleComponent,
      Home
    }
});

I am not getting any errors or anything. I guess somewhere I didn't set it up right, but I'm confused! Thanks! :)

1
laravelvue.js
Do you have vue devtools installed? – Rwd
Don't use components: {} on the root instance. Explicitly declare it with Vue.component('example-component', ExampleComponent). Even better. ` const files = require.context('./', true, /\.vue$/i); files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)); – Ohgodwhy

1 Answers

0
votes

Don't use components: {} on the root instance. Explicitly declare it with:

Vue.component('example-component', ExampleComponent).

Even better. 

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));