Laravel + Vue

laravue.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 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 Create a Vue CLI 3 project in the Laravel app

vue create frontend

pick router

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" }, Configure Laravel for single-page app.

routes/web.php

where('any', '.*'); app/Http/Controllers/SpaController.php