DEV Community

Adam Mateusz Brożyński
Adam Mateusz Brożyński

Posted on

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'); }
}
  • In console:
$ vue ui
  • Open Vue UI dashboard, enter Configuration -> Vue CLI and change Output dir to Laravel public dir: ../../../public/

– based on tutorial by Starkowsky with some fixes

Top comments (1)

Collapse
 
ziad696 profile image
Ziad696

is this a mistake on step "Edit resources/frontend/app/package.json: ",? while should be "Edit resources/app/package.json: "