Laravel + Vue CLI

#laravel #vue

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'); }
}