hhy5277 / laravel-vue-cli-3

Example project using Vue CLI 3 with Laravel

Laravel + Vue CLI 3

This demo assumes you are serving this Laravel app via Valet at laracon.test. If you are serving the laravel app at a different local URL, modify it accordingly in frontend/vue.config.js.

To Run the Frontend

cd frontend
yarn # OR npm install
yarn serve # OR npm run serve

# build for production:
yarn build # OR npm run build

Steps for Scaffolding From Scratch

1. Create Laravel Project

   laravel new my-project
   cd my-project
   
   # remove existing frontend scaffold
   rm -rf package.json webpack.mix.js yarn.lock resources/assets

2. Create a Vue CLI 3 project in the Laravel app

   vue create frontend
   # pick router

3. Configure Vue project

   Create frontend/vue.config.js:

   module.exports = {
     // proxy API requests to Valet during development
     devServer: {
       proxy: 'http://laracon.test'
     },
   
     // output built static files to Laravel's public dir.
     // note the "build" script in package.json needs to be modified as well.
     outputDir: '../public',
   
     // modify the location of the generated HTML file.
     // make sure to do this only in production.
     indexPath: process.env.NODE_ENV === 'production'
       ? '../resources/views/index.blade.php'
       : 'index.html'
   }

   Edit frontend/package.json:

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

4. Configure Laravel for single-page app.

   routes/web.php

   <?php
   
   Route::get('/{any}', 'SpaController@index')->where('any', '.*');

   app/Http/Controllers/SpaController.php

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