feat: add refreshOnResize option

README.md

@@ -104,6 +104,17 @@ export default function ({ $device }) {
 }
 ```
 
+`refreshOnResize` refresh flags when the window resized.(default: false)
+
+```js
+{
+  buildModules: ['@nuxtjs/device'],
+  device: {
+    refreshOnResize: true
+  }
+}
+```
+
 Note that the default user agent value is set to `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36`.
 ## CloudFront Support
 

lib/module.js

@@ -3,7 +3,8 @@ const defu = require('defu')
 
 module.exports = function (moduleOptions) {
   const options = defu(moduleOptions, this.options.device, {
-    defaultUserAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36'
+    defaultUserAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36',
+    refreshOnResize: false
   })
   // Register plugin
   this.addPlugin({

lib/plugin.js

@@ -1,3 +1,5 @@
+import Vue from 'vue'
+
 // eslint-disable-next-line
 const REGEX_MOBILE1 = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|FBAN|FBAV|fennec|hiptop|iemobile|ip(hone|od)|Instagram|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i
 
@@ -34,6 +36,7 @@ function isMacOS (a) {
 }
 
 const DEFAULT_USER_AGENT = '<%= options.defaultUserAgent %>'
+const REFRESH_ON_RESIZE = <%= options.refreshOnResize %>
 
 function extractDevices (ctx, userAgent = DEFAULT_USER_AGENT) {
   let mobile = null
@@ -80,28 +83,42 @@ function extractDevices (ctx, userAgent = DEFAULT_USER_AGENT) {
 }
 
 export default async function (ctx, inject) {
-  let userAgent = ''
-  if (typeof ctx.req !== 'undefined') {
-    userAgent = ctx.req.headers['user-agent']
-  } else if (typeof navigator !== 'undefined') {
-    userAgent = navigator.userAgent
+  const makeFlags = () => {
+    let userAgent = ''
+    if (typeof ctx.req !== 'undefined') {
+      userAgent = ctx.req.headers['user-agent']
+    } else if (typeof navigator !== 'undefined') {
+      userAgent = navigator.userAgent
+    }
+    const { mobile, mobileOrTablet, ios, android, windows, macOS } = extractDevices(ctx, userAgent)
+    return {
+      <% if (options.test) { %>
+      extractDevices,
+      <% } %>
+      userAgent,
+      isMobile: mobile,
+      isMobileOrTablet: mobileOrTablet,
+      isTablet: !mobile && mobileOrTablet,
+      isDesktop: !mobileOrTablet,
+      isIos: ios,
+      isAndroid: android,
+      isWindows: windows,
+      isMacOS: macOS,
+      isDesktopOrTablet: !mobile
+    }
+  }
+  const flags = makeFlags(ctx)
+  if (REFRESH_ON_RESIZE && typeof window !== 'undefined') {
+    inject('device', Vue.observable(flags))
+    window.addEventListener('resize', () => {
+      setTimeout(() => {
+        const newFlags = makeFlags(ctx)
+        for (let key in newFlags) {
+          ctx.$device[key] = newFlags[key]
+        }
+      }, 50)
+    })
+  } else {
+    inject('device', flags)
   }
-
-  const { mobile, mobileOrTablet, ios, android, windows, macOS } = extractDevices(ctx, userAgent)
-
-  inject('device', {
-    <% if (options.test) { %>
-    extractDevices,
-    <% } %>
-    userAgent,
-    isMobile: mobile,
-    isMobileOrTablet: mobileOrTablet,
-    isTablet: !mobile && mobileOrTablet,
-    isDesktop: !mobileOrTablet,
-    isIos: ios,
-    isAndroid: android,
-    isWindows: windows,
-    isMacOS: macOS,
-    isDesktopOrTablet: !mobile
-  })
 }

test/fixture/nuxt.config.js

@@ -8,7 +8,8 @@ module.exports = {
   },
   buildModules: [require('../../')],
   device: {
-    test: true
+    test: true,
+    refreshOnResize: true
   },
   plugins: ['~/plugins/custom-flag.js']
 }