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

Lotje Kinable
2 min readJan 17, 2021

--

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 ORnpm run watchOR npm run watch-poll

Happy coding and thanks for reading!

Kind regards,

Lotje Kinable

--

--

Lotje Kinable

👩🏼‍💻 @1993 she/her, genderfluid, Laravel developer, wife🏳️‍🌈, dog mom, non-professional 🎼 piano/guitar player, photographer and reader 😊