Laravel Development with Elixir + Vue + Hot Reloading

Laravel Elixir with Vue.js and hot reloading

So, here is the thing. You are developing an application in Laravel and Vue.js. Mostly likely, you are using Laravel Elixir to compile your asset and to create Gulp tasks. Now, if you are not using Laravel, but simple HTML/CSS framework, you might be using Webpack.

Things are getting complicated when you start introducing Vue.js components in to your application and every time you want to see a change in the component logic, template, css, you need to gulp it, refresh the page. Or at least the gulp watch is running and you still need a page refresh. What happens when there is a page refresh? That’s right. You are loosing all the application state. Imagine you are modifying a component within a modal popup. Every time you make a change to the vue component, you need to refresh and get the popup up and running to see the changes. That’s when we use Hot reloading plugins! This option would keep your state as it is, and inject any changes made to your Vue components without a page refresh. That’s right. You make a change, press save! You can instantly see the changes reflected on the browser.

Now, we know that its there in the Webpack and if you are using the latest versions (at the time of this writing) Webpack 2.0 and Vue.js 2.0 has this option enabled by default. Here is a link towards the video where the creator of Vue.js Evan You explaining it.

Now that we know it’s there in Webpack, what we really want is this option in Laravel Elixir. But unfortunately, we do not have this option in Laravel Elixir by default. So, I want to show you guys how did I accomplish this in my Laravel application.

Package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-runtime": "^6.11.6",
    "browserify-hmr": "^0.3.5",
    "laravel-elixir": "^4.0.4",
    "vue": "^1.0.28",
    "vue-hot-reload-api": "^1.3.3",
    "vueify": "^6.0.1",
    "vueify-insert-css": "^1.0.0"
  }
}

gulpfile.js

var elixir = require('laravel-elixir');
var gutils = require('gulp-util');
var  b = elixir.config.js.browserify;

if(gutils.env._.indexOf('watch') > -1){
    b.plugins.push({
        name: "browserify-hmr",
        options : {}
    });
}

b.transformers.push({
    name: "vueify",
    options : {}
});

elixir(function(mix) {
    mix.sass('app.scss')
        .browserify('app.js')
        .version(['css/app.css', 'js/app.js']);
});

Now run:

npm install

Once all the packages are installed, run gulp with watch

gulp watch

Now this should compile all your assets. If you are missing any packages and are not mentioned here, it would be shown as a missing error and you can install it using npm insall package-name command.

That’s all. The hot reloading should be up and ready. Try to make any changes to any vue components and you’ll see the changes reflected on the browser without a page refresh. But in order for this to work, I assume you are using .vue component extension files. It has three sections such as template, script, style. So any changes you make here would reflect in the browser.

If you also want browserSync, add the following code to the gulpfile.js

mix.browserSync({
    proxy: 'myapplicationname.dev',
    files: [
        elixir.config.appPath + '/**/*.php',
        elixir.config.get('public.css.outputFolder') + '/**/*.css',
        elixir.config.get('public.versioning.buildFolder') + '/rev-manifest.json',
        'resources/views/**/*.php'
    ],
});

Closing

If you have any other means of achieving the same hot reloading in Laravel or found any missing packages in the package.json file, feel free to comment down.

VueJobs.com

If you are a Vue.js developer and looking for a job, subscribe to our mailing list. Or if you are looking for a Vue.js developer, feel free to post your job requirements here in vuejobs.com.

VueJobs.com