Posted on Jun 3, 2020

Laravel + Vue CLI

Remove unnecessary files from project root:

$ rm -rf package.json webpack.mix.js yarn.lock resources/js resources/sass public/js public/css

Create Vue CLI project:

$ cd resources $ vue create app

Create resources/app/vue.config.js:

module.exports = { // local Laravel server address for api proxy devServer: { proxy: 'http://localhost:8000' }, // outputDir should be Laravel public dir outputDir: '../../../public/', publicPath: '/', // for production we use blade template file indexPath: process.env.NODE_ENV === 'production' ? '../resources/views/app.blade.php' : 'index.html', }

Edit resources/frontend/app/package.json:

"scripts": { "serve": "vue-cli-service serve", - "build": "vue-cli-service build", + "build": "rm -rf ../../../public/assets/app/{js,css,img} && vue-cli-service build --no-clean",  "lint": "vue-cli-service lint" },

Edit routes/web.php:

Route::any('/{any}', 'ViewController@app')->where('any','^(?!api).*$');

Create app/Http/Controllers/ViewController.php:

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class ViewController extends Controller { public function app() { return view('app'); } }