Example project using Vue CLI 3 with Laravel
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app integration Jul 25, 2018
bootstrap init Jul 25, 2018
config init Jul 25, 2018
database init Jul 25, 2018
frontend fix typo (#6) Aug 13, 2018
public build Jul 25, 2018
resources build Jul 25, 2018
routes integration Jul 25, 2018
storage init Jul 25, 2018
tests init Jul 25, 2018
.editorconfig init Jul 25, 2018
.env.example init Jul 25, 2018
.gitattributes init Jul 25, 2018
.gitignore init Jul 25, 2018
README.md fix typo (#5) Aug 13, 2018
artisan init Jul 25, 2018
composer.json init Jul 25, 2018
composer.lock init Jul 25, 2018
phpunit.xml init Jul 25, 2018
server.php init Jul 25, 2018

README.md

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