Git Product home page Git Product logo

laravel-vue-cli's Introduction

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
        "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
        "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"
      }
    }

laravel-vue-cli's People

Contributors

barryvdh avatar bencorlett avatar browner12 avatar codler avatar crynobone avatar cviebrock avatar daylerees avatar dependabot-preview[bot] avatar driesvints avatar ericlbarnes avatar franzliedke avatar grahamcampbell avatar jakobud avatar jasonlewis avatar jeffreyway avatar jesseobrien avatar josephsilber avatar kapv89 avatar kbanman avatar laurencei avatar mathewhany avatar mikelbring avatar neoascetic avatar pedroborges avatar sjorso avatar sparksp avatar taylorotwell avatar themsaid avatar tillkruss avatar tobsn avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.