- 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 changeOutput dir
to Laravel public dir:../../../public/
– based on tutorial by Starkowsky with some fixes
Top comments (1)
is this a mistake on step "Edit resources/frontend/app/package.json: ",? while should be "Edit resources/app/package.json: "