nuxt-modules / device Goto Github PK

Can we use a custom breakpoints for conditionally showing up elements in a component with SSR?

Hi!

For various purposes, I would like to be able to know the name of the type of device. For example, to be able to specify

Hi,

Thank you for your module, it is greatly appreciated. Is there a way to make it work with static pages too? I mean those generate with npm run generate.

Antony

I keep getting this issue when showing/hiding elements using v-if="", works during dev but not after generate.

Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

Any idea why?

It would be cool if we could parse userAgents manually (E.g. I'm currently working on a site where you can see your sessions and it would be nice to provide a little icon. To find out the browser type I would like to use the $device api).

I think you just need to export the function, then we can all use it. Otherwise something like $device.parse(myUserAgent).isAndroid would be cool.

Doesnt work on first open with nuxt-generate. can this not be done. or is there a way around this.

USER_AGENTの取得が出来ない場合
DEFAULT_USER_AGENTを使って判断してしまうと、PCになってしまうが、USER_AGENTが取得出来ない場合の処理を外部から指定できる様にして欲しい

Firstly i would like to thank you for your great effort on this project.
I have two layouts one for desktop and one for mobile so i built my components exactly same as your documentation and here is the code:

       <div v-if="$device.isDesktop">
		Desktop

	</div>

	<div v-if="$device.isMobile">

		Mobile

	</div>`

export default { layout: (ctx) => ctx.isMobile ? 'mobile' : 'main' }
its work fine on dev mode but when i run npm run generate or npm run build everything changes the mobile layout won't be apply on mobile.
in addition this error appears on console

NOTE: when i add this line { defaultUserAgent: 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36' } The opposite happens, mobile layout applied on desktop and mobile.

I see this problem constantly repeating, so please provide a solution as soon as possible.
Thanks in advance

Hi guys ...

I am trying to use this feature to determine CSS classes, but I could not make it work:

<div :class="['has-text-white', { 'has-text-warning' : $device.isDesktop }]"> test </div>

This logic works as it should:

<div v-if="$device.isDesktop"> Desktop </div> <div v-else-if="$device.isTablet"> Tablet </div> <div v-else> Mobile </div>

I am missing something? Or is not possible to use this module to determine dynamic CSS classes?

Thank you very much!

Hi, thanks for the great effort. I wanted to know if there's some simple way to access this inside store? 1 step further, inside any plain js file?

If I add a custom flag, in my case device orientation, it is not reactive within the components.
Do you think that there is an easy way to extend the REFRESH_ON_RESIZE implementation to also include the custom flags, and thus pass them to the Vue.observable?

Hi,

I'm trying to add the plugin globally in my Storybook instance.

import Device from '@nuxtjs/device';

Vue.use( Device, { refreshOnResize: true });

But it seems that the options are not transmitted to the plugin as I'm facing the following error:
TypeError: this.options is undefined

Do you have an idea on how I can inject it into my Vue instance ?
Thanks a lot :)

Hi! This is a really nice module. If you wish we can move it to a more official namespace (nuxt-community/device-module and @nuxtjs/device).

If you wish, here are steps:

• We will send you invitations for GitHub and NPM
• Move the repository to nuxt-community
• A PR to make repo compatible with module-template
• Publish under @nuxtjs and offer users using the new package. deprecating current one.

Hi,

I followed the install instructions. So, I have:

// package.json
"devDependencies": {
  "@nuxtjs/device": "^2.0.1",
},

//  nuxt.config.ts
buildModules: [
  '@nuxt/typescript-build',
  '@nuxtjs/vuetify',
  '@nuxtjs/pwa',
  '@nuxtjs/firebase',
  '@nuxtjs/device',
],

And yet, I do not get any type-ahead typings anywhere. I tried in the store, on the nuxt Context object and a component's 'this'. No $device object found anywhere. If I run the app and inspect it with the Chrome dev tools, I can see it is there. And, if I do the following, it works!

// Inside a component (using property decorator syntax)
get isOnDesktop() {
  return (this as any).$device.isDesktop
}

I've even restarted windows just to make sure it wasn't something weird like that.

Where am I going wrong?

I`m moving big project to Nuxt 3 and found that $device is not available on template and I have no idea where to get it with composition api.
Is it possible to use this module with nuxt 3 or not yet?

When running npm run generate the ctx.req is always undefined meaning it always tries to get the navigator.userAgent which is undefined on the server:

 ReferenceError: navigator is not defined

I'm not sure what a solid fix would be but the following works for me (in plugin.js):

let userAgent = process.server ? '' : navigator.userAgent

Hello,

When upgrading to version Nuxt 3 RC 9 the component fails

Everything has been going well using module, but i noticed that the browser no longer caches my pages again (using fetch & keep-alive) when i use this module for dynamic layouts (like shown in the docs :
layout: (ctx) => ctx.isMobile ? "mobile" : "desktop").

I have an app that have to ensure the user is on a real mobile device.
By simply changing the user agent on google console dev tools it shows me i'm on mobile.
Is there a way to check and prevent it?

It would be great if there's an option to add custom flags to $device definition.

I need to detect whether the browser is my company's app, and I'd like to keep the same API as other Mobile/Desktop detection.

So far I took the approach described here, but would be nice if there's a built-in feature for this

How to make a plugin to add custom flag in Nuxt 3 ? I tried this but not working

export default defineNuxtPlugin((nuxtApp) => {
    let webview = useCookie('webview')
    let device = useDevice()
    device.isWebview = webview && webview.value !== null;
})

I have your first star

Hi I'm getting an npm error:

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@nuxtjs%2fdevice - Not found
npm ERR! 404
npm ERR! 404 '@nuxtjs/device@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

"dependencies": { "nuxt": "^2.15.8", }, "devDependencies": { "@nuxtjs/device": "^3.0.0" }

console.log('$device', this.$device)

As google have announced that they are going to deprecate UA(User Agent) Strings and they will replace it with Client Hints. So are you going to add support for Client Hints as well?

is there any flag to detects bots and crawlers? I'm currently use nuxt-user-agent to check for crawlers and appreciate to have crawler detector on this package so I can only use one package.

This library is pretty sweet, however, I feel that an important feature like browser detection is missing, given that the user agent is already available on the server-side, it would be amazing to also have the browser available.

I've made window resize listener, it works. But...
I open website as a PC, change to mobile view in developer panel, an the $device is still showing that is desctop

Migrating from Nuxt2 to Nuxt3 and receiving the following errors:

[Vue warn]: Property "$device" was accessed during render but is not defined on instance.           
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'isMobileOrTablet')

component:

  <section class="section-gallery">
    <div class="container">
      <TouchGallery v-if="$device.isMobileOrTablet" />
      <DesktopGallery v-else />
    </div>
  </section>
</template>

<script>
import TouchGallery from './TouchGallery.vue'
import DesktopGallery from './DesktopGallery.vue'

export default {
  components: { TouchGallery, DesktopGallery },
}
</script>

Any ideas on what might be going on here?

Hi and thanks for your work on this module 👋

This is more like a question so I hope you have tips on how to solve this.

I found a strange behavior when using $device in template.

Test environment:

• @nuxtjs/device: 2.1.0
• create-nuxt-app: 2.15.7
• target: static (yarn generate)

Simple Example

To avoid possible errors in target: static mode, I use v-if with v-else:

<!-- index.vue -->

<template>
  <div>
    <!-- If 'isDesktop = true' - show desktop content -->
    <p v-if="$device.isDesktop">Desktop</p>
    <!-- If 'isDesktop = false' - show content but with class="hidden" -->
    <p v-else class="hidden">*</p>
  </div>
</template>

<script>
  export default {}
</script>

<style>
  .hidden {
    display: none;
  }
</style>

Current Output

This is displayed in the html output after I run yarn generate -> yarn start:

<!-- isDesktop = true -->

<div id="__layout">
  <div>
    <p>Desktop</p>
  </div>
</div>

<!-- isDesktop = false -->

<div id="__layout">
  <div>
    <!-- attribute class="hidden" is removed from the html output -->
    <p>*</p>
  </div>
</div>

Expected Output

This is example of expected html output after I run yarn generate -> yarn start:

<!-- isDesktop = true -->

<div id="__layout">
  <div>
    <p>Desktop</p>
  </div>
</div>

<!-- isDesktop = false -->

<div id="__layout">
  <div>
    <!-- attribute class="hidden" has not been removed from the html output -->
    <p class="hidden">*</p>
  </div>
</div>

Working Example

This example works as expected after I run yarn generate -> yarn start:

<!-- index.vue -->

<template>
  <div>
    <p v-if="isDesktop">Desktop</p>
    <p v-else class="hidden">*</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isDesktop: false
      }
    }
  }
</script>

<style>
  .hidden {
    display: none;
  }
</style>

Output

<!-- isDesktop = true -->

<div id="__layout">
  <div>
    <p>Desktop</p>
  </div>
</div>

<!-- isDesktop = false -->

<div id="__layout">
  <div>
    <!-- attribute class="hidden" has not been removed from the html output -->
    <p class="hidden">*</p>
  </div>
</div>

I hope this is not too confusing. Please let me know if you need more info.

Hello, i think nuxt.config file need to be like that :

modules: [
    ['nuxt-device-detect',{defaultUserAgent: 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36'} ],
]

not like on your readme file:

modules: [
   'nuxt-device-detect',
   // set mobile user-agent
   {defaultUserAgent: 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36'}
  ] 

there is a syntax error.

Much appreciated for the work in this module.

Although it works on SPA & SSR, it doesn't work when you statically generate pages. Any fix for this? Thanks

If I put ssr: false in nuxt config, it's generate fine.

If I do not place ssr: false, it's failed.

Seems like problem in this line: userAgent = this.ctx.req.headers["user-agent"].

What should I do?
I run npm run build, then npm run generate.

 + 26 hidden assets
Entrypoint app = server.js server.js.map

 WARN  [pwa] [icon] Icon not found in C:\Work\mosoblcom\nuxt\static\icon.png     

i Full static generation activated                                     12:11:09
i Generating output directory: nuxt/                                   12:11:09
i Generating pages with full static mode                               12:11:09

 ERROR   /company                                                      12:11:09  

TypeError: Cannot read properties of undefined (reading 'headers')
    at new MobileDetect (node_modules/.cache/nuxt/nuxt-mobile-detect/mobileDetect.js:11:0)
    at nuxt_mobile_detect_plugin (node_modules/.cache/nuxt/nuxt-mobile-detect/plugin.js:4:0)
    at createApp (node_modules/.cache/nuxt/index.js:230:0)
    at async module.exports.__webpack_exports__.default (node_modules/.cache/nuxt/server.js:85:0)


 ERROR   /contacts                                                     12:11:09  

TypeError: Cannot read properties of undefined (reading 'headers')
    at new MobileDetect (node_modules/.cache/nuxt/nuxt-mobile-detect/mobileDetect.js:11:0)
    at nuxt_mobile_detect_plugin (node_modules/.cache/nuxt/nuxt-mobile-detect/plugin.js:4:0)
    at createApp (node_modules/.cache/nuxt/index.js:230:0)
    at runNextTicks (node:internal/process/task_queues:61:5)
    at listOnTimeout (node:internal/timers:528:9)
    at processTimers (node:internal/timers:502:7)
    at async module.exports.__webpack_exports__.default (node_modules/.cache/nuxt/server.js:85:0)


 ERROR   /portfolio                                                    12:11:09  

TypeError: Cannot read properties of undefined (reading 'headers')
    at new MobileDetect (node_modules/.cache/nuxt/nuxt-mobile-detect/mobileDetect.js:11:0)
    at nuxt_mobile_detect_plugin (node_modules/.cache/nuxt/nuxt-mobile-detect/plugin.js:4:0)
    at createApp (node_modules/.cache/nuxt/index.js:230:0)
    at runNextTicks (node:internal/process/task_queues:61:5)
    at listOnTimeout (node:internal/timers:528:9)
    at processTimers (node:internal/timers:502:7)
    at async module.exports.__webpack_exports__.default (node_modules/.cache/nuxt/server.js:85:0)


 ERROR   /                                                             12:11:09  

TypeError: Cannot read properties of undefined (reading 'headers')
    at new MobileDetect (node_modules/.cache/nuxt/nuxt-mobile-detect/mobileDetect.js:11:0)
    at nuxt_mobile_detect_plugin (node_modules/.cache/nuxt/nuxt-mobile-detect/plugin.js:4:0)
    at createApp (node_modules/.cache/nuxt/index.js:230:0)
    at runNextTicks (node:internal/process/task_queues:61:5)
    at processTimers (node:internal/timers:499:9)
    at async module.exports.__webpack_exports__.default (node_modules/.cache/nuxt/server.js:85:0)

√ Client-side fallback created: 200.html                               12:11:09  
√ Static manifest generated                                            12:11:

Hi everyone.
When set v-if="$device.isDesktop", if go to greater 1200px doesn't work correctly.

what is the problem?

Hi, this is a great module, I try to use and test this on the Nuxt.js head using this.$device.isDesktop:

head() {
   const { $device } = this
   return {
      title: 'page title',
      ...($device.isDesktop && {
        script: [
          {
            innerHTML: 'structuredData',
            type: 'application/ld+json'
          }
        ]
      })
   }
}

The module only working on yarn dev not on build or generate even on yarn start. Am I missing something? well, my actual target was $device.isCrawler to load scripts only on bots engine (Not yet tested on live).

Tested on:
"nuxt": "^2.14.12"
"@nuxtjs/device": "^2.1.0"

Thank you

This code is working perfectly in local, but not in prod :
DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method

<template v-if="$device.isChrome">
   <a target="_blank" href="....." ><img src="@/assets/svg/chrome-icon.svg" /> Install on Chrome</a>
</template >
<template v-if="$device.isFirefox">
   <a  target="_blank" href="..." ><img src="@/assets/svg/firefox-icon.svg" /> Install on Firefox</a>
</template >
{{ $device }}

Any ideas?
Thanks a lot!

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (main) (@nuxt/devtools, @nuxt/eslint-config, @nuxt/module-builder, actions/checkout, eslint, pnpm, vitest)
• chore(deps): update devdependency @nuxtjs/eslint-config to v12 (2.x)
• chore(deps): update devdependency eslint to v9 (2.x)
• chore(deps): update devdependency jest to v29 (2.x)
• chore(deps): update devdependency jsdom to v24 (2.x)
• chore(deps): update devdependency node-fetch to v3 (2.x)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Perhaps I misunderstood what refreshOnResize does, but it seems that it just populates the flags again, only taking into account the user agent. The user agent does not change when you resize the browser window or rotate the mobile device, so I dont understand what its purpose is.

Hi, I couldn't find types.d.ts file in node_modules after moved to this module. How to import it?

On latest ios(13+) Safari, it detects iPad as a desktop. Works properly on chrome and other mobil devices. Could you take a look at this issue?

navigator.useragent information will be freezed.

Could you will support client hints ?

refer to,

• https://web.dev/i18n/en/user-agent-client-hints/
• https://medium.com/naver-fe-platform/prepare-for-client-hints-freezing-user-agent-9c0ea1ddd02c

When making my web page adaptive for iPad, I used isTablet optioin. And I want it to work properly showing that the device I am using is a tablet - iPad. But the plugin sees it as a desktop.

What option to use to get an iPad device?

This is just an idea, but it would nice to have the Facebook and Instagram in-app browsers flagged as isMobile. Currently, I just add a check myself for FBAN, FBAV and Instagram in the UA.

Hello.
Is there a way to check if it is a Huawei device?
Thanks

Upon exploring lib/types.d.ts there isnt any exported interface for options defined in nuxt.config.ts.
For example: refreshOnResize

Hi!

Whatever the browser, it returns FALSE:

{ 
   "userAgent": "", 
   "isMobile": false, 
   "isMobileOrTablet": false, 
   "isTablet": false, 
   "isDesktop": true, 
   "isIos": false, 
   "isAndroid": false, 
   "isWindows": false, 
   "isMacOS": false, 
   "isDesktopOrTablet": true, 
   "isSafari": false, 
   "isFirefox": false, 
   "isEdge": false, 
   "isChrome": false, 
   "isSamsung": false, 
   "isCrawler": false
}

My code:

<div v-if="$device.isChrome">
      <a target="_blank" href="https://chrome.google.com/webstore/detail/superjour/odhpgpffomiknbhoijjbhhejhebkjocj" class="btn-install-extension mb-5 mb-lg-0"><img src="@/assets/svg/chrome-icon.svg" /> Installer l'extension</a>
</div>
<div v-if="$device.isFirefox">
     <a target="_blank" href="https://addons.mozilla.org/fr/firefox/addon/superjour/" class="btn-install-extension mb-5 mb-lg-0"><img src="@/assets/svg/firefox-icon.svg" /> Installer l'extension</a>
</div>
<div v-if="$device.isEdge">
    <a target="_blank" href="https://microsoftedge.microsoft.com/addons/detail/superjour/gjokempmnkmoknfllggolacgcamgfmfe" class="btn-install-extension mb-5 mb-lg-0"><img src="@/assets/svg/edge-icon.svg" /> Installer l'extension</a>
</div>
<code>{{ $device }}</code>

<script>
export default {
   buildModules: [
    'vue-browser-detect-plugin/nuxt'
  ],
</script>

What am I doing wrong?
Thanks!

Small thing IMO but the module is not listed as compatible with Nuxt3 as of right now

https://nuxt.com/modules?q=device&version=3.x