VueJs component doesnt show on a laravel blade

0
votes

I'm trying to display a vue component which is in assets/js/components/LoginComponent.vue which look like this 

<template>
<h1>hello</h1>
</template>
<script>
export default {
    mounted() {
        console.log('Component mounted.')
    }
}
 </script>

and the app.js is like this

require('./bootstrap');

window.Vue = require('vue');
Vue.component('login-component', require('./components/LoginComponent.vue'));

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

and the blade which am trying to import my vuejs component is like this

<body>
<div id="app">


        <login-component></login-component>


        @yield('content')

</div>
</body>

it displays all the page without the component any idea how to solve it ?

3
javascriptlaravelvue.js
Is there any error message? - Bennett Dams
Don't forget npm run watch to actually build the component - George Sharvadze
@BennettDams No this is what I get imguh.com/image/8o6zy - Khalid Bakry
@KhalidBakry Did you include components: {login-component} in your app component? - Bennett Dams
@BennettDams do you mean this line Vue.component('login-component', require('./components/LoginComponent.vue')); ? - Khalid Bakry

3 Answers

0
votes

These solved the trick

https://laravel.com/docs/5.6/frontend

https://laravel.com/docs/5.6/mix

Install these and ctrl+s will rebulid all the js and will find it

0
votes
  • Compile the Vue file with npm run watch or npm run dev.

  • Check that you have the links to the the compiled assets on the blade file:

    <link rel="stylesheet" href="{{ asset('dist/css/app.css') }}"> @if (app()->isLocal()) <script src="{{ asset('js/app.js') }}"></script> @else <script src="{{ mix('js/manifest.js') }}"></script> <script src="{{ mix('js/vendor.js') }}"></script> <script src="{{ mix('js/app.js') }}"></script> @endif

  • Please check that them are loading correctly in the network tab,

  • Also make the #app div only wrap the login-component

    <div id="app"> <login-component></login-component> </div> @yield('content')

0
votes

In app.js

Vue.component('login-component', require('./components/LoginComponent.vue').default);

and it is need to install
npm install --save axios vue-axios

In Upper of app.js it is need to declare

import VueAxios from 'vue-axios';
import axios from 'axios';

require('./bootstrap');

window.Vue = require('vue');
Vue.use(VueAxios, axios);

Hope it work