diff --git a/packages/webpack/src/builder.js b/packages/webpack/src/builder.js
index 90e3b27bec..d0b7c73699 100644
--- a/packages/webpack/src/builder.js
+++ b/packages/webpack/src/builder.js
@@ -182,6 +182,7 @@ export class WebpackBundler {
 
     const { name } = compiler.options
     const { nuxt: { server }, options } = this.context
+    const { client, ...hotMiddlewareOptions } = options.build.hotMiddleware || {}
 
     // Create webpack dev middleware
     this.devMiddleware[name] = pify(
@@ -209,7 +210,7 @@ export class WebpackBundler {
             log: false,
             heartbeat: 10000
           },
-          options.build.hotMiddleware,
+          hotMiddlewareOptions,
           {
             path: `/__webpack_hmr/${name}`
           }
diff --git a/packages/webpack/src/config/client.js b/packages/webpack/src/config/client.js
index 30065ca35b..68589eb44a 100644
--- a/packages/webpack/src/config/client.js
+++ b/packages/webpack/src/config/client.js
@@ -1,5 +1,6 @@
 import path from 'path'
 import fs from 'fs'
+import querystring from 'querystring'
 import consola from 'consola'
 import webpack from 'webpack'
 import HTMLPlugin from 'html-webpack-plugin'
@@ -159,6 +160,20 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
   config() {
     const config = super.config()
 
+    const { client = {} } = this.options.build.hotMiddleware || {}
+    const { ansiColors, overlayStyles, ...options } = client
+    const hotMiddlewareClientOptions = {
+      reload: true,
+      timeout: 30000,
+      ansiColors: JSON.stringify(ansiColors),
+      overlayStyles: JSON.stringify(overlayStyles),
+      ...options,
+      name: this.name
+    }
+    const clientPath = `${this.options.router.base}/__webpack_hmr/${this.name}`
+    const hotMiddlewareClientOptionsStr =
+      `${querystring.stringify(hotMiddlewareClientOptions)}&path=${clientPath}`.replace(/\/\//g, '/')
+
     // Entry points
     config.entry = {
       app: [path.resolve(this.options.buildDir, 'client.js')]
@@ -170,9 +185,7 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
         // https://github.com/webpack-contrib/webpack-hot-middleware/issues/53#issuecomment-162823945
         'eventsource-polyfill',
         // https://github.com/glenjamin/webpack-hot-middleware#config
-        `webpack-hot-middleware/client?name=${this.name}&reload=true&timeout=30000&path=${
-          this.options.router.base
-        }/__webpack_hmr/${this.name}`.replace(/\/\//g, '/')
+        `webpack-hot-middleware/client?${hotMiddlewareClientOptionsStr}`
       )
     }