https://github.com/yyx990803/laravel-vue-cli-3

Example project using Vue CLI 3 with Laravel
https://github.com/yyx990803/laravel-vue-cli-3

Last synced: 3 months ago
JSON representation

Example project using Vue CLI 3 with Laravel

• Host: GitHub
• URL: https://github.com/yyx990803/laravel-vue-cli-3
• Owner: yyx990803
• Created: 2018-07-25T19:06:40.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-04-24T07:45:14.000Z (over 5 years ago)
• Last Synced: 2024-04-15T12:20:07.532Z (7 months ago)
• Language: PHP
• Size: 545 KB
• Stars: 850
• Watchers: 36
• Forks: 183
• Open Issues: 14
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

``` sh

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

    ``` sh

    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

    ``` sh

    vue create frontend

    # pick router

    ```

3. Configure Vue project

    Create `frontend/vue.config.js`:

    ``` 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`:

    ``` diff

    "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

    where('any', '.*');

    ```

    **app/Http/Controllers/SpaController.php**

    ``` php