Skip to content

Laravel 7 + Vue CLI 4 SPA (Vuex, Router, Test) Admin + Public builds

Notifications You must be signed in to change notification settings

starkovsky/laravel-vue-cli

 
 

Repository files navigation

Laravel 7 + Vue CLI 4

Example config your Laravel project with two builds (public and admin)

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/js resources/sass public/js public/css
  2. Create a Vue CLI 4 project in the Laravel '/resources/frontend/'

    cd resources/frontend
    vue create app
    #and (if you need admin build)
    vue create admin
  3. Configure Vue CLI 4 project

    Create /resources/frontend/app/vue.config.js:

    module.exports = {
     devServer: {
       proxy: 'http://laravel.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/assets/app',
    
      publicPath: process.env.NODE_ENV === 'production'
        ? '/assets/app/'
        : '/',
    
      // modify the location of the generated HTML 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"
    },

    and (if you need admin build)

    Create /resources/frontend/admin/vue.config.js:

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

    Edit /resources/frontend/admin/package.json

    "scripts": {
      "serve": "vue-cli-service serve",
    - "build": "vue-cli-service build",
    + "build": "rm -rf ../../../public/assets/admin/{js,css,img} && vue-cli-service build --no-clean",
      "lint": "vue-cli-service lint"
    },
  4. Configure Laravel routes for SPA.

    routes/web.php

    <?php
    // For admin application
    Route::get('/admin{any}', 'FrontendController@admin')->where('any', '.*');
    // For public application
    Route::any('/{any}', 'FrontendController@app')->where('any', '^(?!api).*$');

    app/Http/Controllers/FrontendController.php

    <?php
    namespace App\Http\Controllers;
    use Illuminate\Http\Request;
    
    class FrontendController extends Controller
    {
        // For admin application
        public function admin()
        {
            return view('admin');
        }
        // For public application
        public function app()
        {
            return view('app');
        }
    }
  5. Change base: process.env.BASE_URL in router.js for correct Vue Router

    // For App
    base: '/',
    // For Admin
    base: '/admin/',
  6. Add package.json in root (if you want use yarn run in root)

    {
      "name": "laravel",
      "version": "0.2.0",
      "private": true,
      "scripts": {
        // For public application
        "prepare:app": "cd resources/frontend/app && yarn install",
        "serve:app": "cd resources/frontend/app && yarn run serve",
        "build:app": "cd resources/frontend/app && yarn run build",
        "lint:app": "cd resources/frontend/app && yarn run lint",
        "test:app": "cd resources/frontend/app && yarn run test:unit",
        // For admin application
        "prepare:admin": "cd resources/frontend/admin && yarn install",
        "serve:admin": "cd resources/frontend/admin && yarn run serve",
        "build:admin": "cd resources/frontend/admin && yarn run build",
        "lint:admin": "cd resources/frontend/admin && yarn run lint",
        "test:admin": "cd resources/frontend/admin && yarn run test:unit"
      }
    }

About

Laravel 7 + Vue CLI 4 SPA (Vuex, Router, Test) Admin + Public builds

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • PHP 89.7%
  • Vue 7.1%
  • HTML 3.2%