Why does LiveReload not work in vue-cli project with Vagrant?

After struggling long with this, I finally found out how to do that. Do this:

/build/dev-server.js

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: false,
  stats: {
    colors: true,
    chunks: false
  },
  watchOptions: { //Add Polling
    aggregateTimeout: 300,
    poll: true
  }
})

Solution for Vue CLI 3.0.0

There are tow problems to solve:

1. vagrant machine doesn't get information about changes from host machine;
2. sockjs-node is probably configured for localhost.

Solution

1. set pooling for webpack;
2. set public address in webpack devServer configuration.

Create vue.config.js file in projects main directory:

module.exports = {
  configureWebpack: {
    devServer: {
        watchOptions: {
          ignored: ['node_modules'],
          aggregateTimeout: 300,
          poll: 1500
        },
        public: '192.168.56.132' // vagrant machine address
    }
  }
}

Notification via inotify requires the kernel to be aware of all relevant filesystem events, which is not always possible for networked filesystems such as NFS.

You will need polling so Webpack will check every few hundred milliseconds to see if your files have been updated.

 watchOptions: {
   poll: true
 }

to the bottom of your webpack.dev.conf.js

EDIT: LiveReload Chrome Extension listens on port 35729. Add the following to your Vagrantfile

config.vm.network "forwarded_port", guest: 35729, host: 35729