[Vuejs]-VueJs component doesnt show on a laravel blade

0๐Ÿ‘

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๐Ÿ‘

  • 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๐Ÿ‘

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

Leave a comment