Install Vue.js in Laravel 8 application (Jetstream/Livewire Stack) on Macos

I really like Livewire, but sometimes I want to use Vuejs for things like FullCalendar.io because I’m used to it.

• Laravel 8
• Vuejs 2
• Livewire 2
• Laravel-mix 6

1. Use the terminal to install Vue.js (^ 2):

npm install vue  // npm i vue

2. Install the livewire-vue package :

npm install livewire-vue --save-dev

3. Adapt resources/js/app.js :

require('./bootstrap');

require('alpinejs');
require('livewire-vue');

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

window.Vue = Vue // 'require('vue');' won't work!

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

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

4. Create (folder and) file resources/js/components/ExampleComponent.vue :

<template>
    <div>Hello World!</div>
</template>

<script>
export default {
    mounted() {
        console.log("Mounted!");
    }
};
</script>

5. In your layout file, standard in Jetstream/Livewire stack is app.blade.php, add id=”app” to either the body or the “main” section.

<!-- Page Content -->
<main id="app">
    {{ $slot }}
</main>

6. Add .vue() to webpack.mix.js. I also added the .sourceMaps() because it fixes a “DevTools failed to load SourceMap” 404 error for the source map of livewire-vue.js.map.

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .sourceMaps(true, 'source-map') 
    .vue();

if (mix.inProduction()) {
    mix.version();
}

7. Run

npm run dev 
OR
npm run watch
OR 
npm run watch-poll

Happy coding and thanks for reading!

Kind regards,

Lotje Kinable