Setup Laravel Livewire with VUE.JS

Laravel Livewire gives you an easy way to create a SPA in just a few seconds. For most ajax features is Livewire the right choice, but what if you go in depth? Sometimes you may need some special features like charts or any other JS stuff. Then it can be useful to go back to good old VUE.JS. Here I want to show you, how to setup your Laravel App with Livewire and VUE.JS

To handle Livewire and VUE.JS in the same time, your Laravel project will need an extra package called: livewire-vue. You can easily install the package via NPM:

npm install livewire-vue --save-dev

Then you will need to insert some code in your resources/js/app.js file:

import Vue from 'vue'
import 'livewire-vue'

require('./bootstrap');

window.Vue = Vue

// Create some Vue components into your components directory
Vue.component('AnyComponent', require('./components/AnyComponent.vue').default);

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

Don’t forget to generate your code in your App with NPM:

npm run dev

You must also check, if you have set the path to you JS files in your App-Layout file, like this:

    ...
    @livewireScripts
    <script src="{{ mix('/js/app.js') }}"></script>
</body>

Now you can run Livewire and VUE.JS in the same time. I wish you happy Coding. Please leave a comment for feedback!