VueJs component not showing in page (using Laravel framework)

0
votes

I followed the Laravel tutorial to install and use VueJs

I installed:

composer require laravel/ui
php artisan ui bootstrap
php artisan ui vue
npm install

I compiled all: (Compiled fine no errors)

npm run dev

Code:

resources/js/app.js

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

resources/js/components/ExampleComponent.vue

<template>
    example from laravel
</template>

resources/views/layout.blade.php

<head>
    <script src="{{ asset('js/app.js')}}"></script>
</head>

<body>
    <example-component></example-component>
</body>

Am I missing some configuration? I have no idea what else I need to do.

Page loads fine I can see the page and I can write html/css for visual, but I cant see the Vue component.

4
laravelvue.js

4 Answers

0
votes

Can you try this:

<head>
    <script src="{{ asset('js/app.js')}}"></script>
</head>

<body>
   <div id="app">
      <example-component></example-component>
   </div>
</body>
0
votes

Is your app.js file like this

require('./bootstrap');

    window.Vue = require('vue');

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

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

Also, try to add the app.js to the bottom of the page

<body>
   <div id="app">
      <example-component></example-component>
   </div>

<script src="{{ asset('js/app.js')}}"></script>

</body>
0
votes

I presume you are using Chrome? Did you disable cache? If not: Open the dev tools and disbale caching when dev tools open (quick google search gives you many links how to do it), reload - component will be there.

And make sure you have the component wrapped on the #app div.

If that doesn’t work ... show us app.js, component.js and also the blade templates.

0
votes

Try to change the script asset from:

<body>
   <div id="app">
      <example-component></example-component>
   </div>

<script src="{{ asset('js/app.js')}}"></script>

</body>

To

<body>
   <div id="app">
      <example-component></example-component>
   </div>

<script src="{{ asset('public/js/app.js')}}"></script>

</body>

It worked for me when I went through this problem