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
Top comments (0)