Laravel v8 (with Sail and BrowserSync), VueJS v3 with Vue Loader boilerplate.

Github dist: https://github.com/StuartCreed/Vue3Laravel8BoilerPlate

To setup, do the following:

composer install
npm install
./vendor/bin/sail up
npm run watch

Extra Info - Sail config

docker-composer.yml file changed to use port '8081:80' so that the app runs on localhost:8081, as I have another program that uses localhost:8080 (the default for Sail).
See https://dev.to/stuartcreed/using-laravel-sail-docker-composer-for-laravel-on-a-existing-application-24k5 for more information.
This link will also help you if you have any other port conflicts.

Sources

This is an adaptation of:
https://dev.to/boussadjra/how-to-setup-vue-3-with-laravel-8-4ne6
https://github.com/boussadjra/laravel-vue-3-starter/blob/main/webpack.mix.js

A summary of this is:

npm i -D laravel-mix@next vue@next @vue/compiler-sfc vue-loader@next

Ensure package.json includes:

"scripts": {
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "production": "mix --production"
}

webpack.mix.js should contain

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue();

The minimum content of resources/js/app.js:

import { createApp } from 'vue';
import App from './components/App.vue'
createApp(App).mount("#app")

Laravel Sail:
https://laravel.com/docs/8.x/sail

Blog

Laravel v8 (with Sail and BrowserSync), VueJS v3 with Vue Loader boilerplate.

StuartCreed

To setup, do the following:

Extra Info - Sail config

Sources

Join Our Newsletter. No Spam, Only the good stuff.

Related