yyx990803 / laravel-vue-cli-3

Example project using Vue CLI 3 with Laravel
848 stars 183 forks source link

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