Vue.js CLI Webpack Laravel Proof of Concept
This post is a simple proof of concept for using vue-cli to scaffold a Webpack Laravel project. The production build modifies the default Laravel blade view and outputs the built assets into the public/static directory. The development workflow demonstrates hot reloading and css style extraction.
Environment
This example was created using a fresh install of Laravel 5.2 served by XAMMP on Windows 10.
Nodejs version 6.9.1
NPM version 3.10.8
vue-cli version 2.4.0
git version 2.7.0
Development
Change to the laravel directory. For example,
cd c:/xampp/htdocs/laravel
Use vue-cli to download vuejs, wepbpack and template dependencies and create the project in the laravel/resources folder.
vue init webpack resources
Change to the resources directory.
cd resources
Install node modules with npm install or npm i.
npm i
Run development server.
Check the dev.port in resources/config/index.js to make sure it is not the same as the port used by the XAMPP Apache server.
npm run dev
Update the /resources/src/components/Hello.vue vue commponent to see the hot reloading take place. In the script portion of the component, change the msg value. For example, ‘Welcome to Your Vue.js Laravel App’.
Hello.vue
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js Laravel App'
}
}
}
</script>
For development on Laravel sever generated pages, another solution is to update the package.json scripts property so the npm run dev command runs webpack development compilation with watch mode enabled. Watch mode recompiles after every change is saved.
package.json
"dev": "cross-env NODE_ENV=development webpack --watch --progress --colors"
Production
Edit /resources/config/index.js. Update the build paths so the welcome.blade.php view gets the index markup and the assets are built to the public/static folder.
index.js
build: {
...
index: path.resolve(__dirname, '../views/welcome.blade.php'),
assetsRoot: path.resolve(__dirname, '../../public'),
The ellipsis
...in the snippet above is not a part of the code and is there only to denote lines that are skipped and not applicable to the example.
Run production build.
npm run build
Manually refresh the laravel.dev page served by XAMPP to verify the production build.