@nuxtjs/device

This module injects flags that indicate a device type into the context and the component instance.

See demo on CodeSandbox.

Setup for Nuxt3

If you use Nuxt2.x use @nuxtjs/device 2.x.

Add @nuxtjs/device to the dev dependencies using yarn or npm to your project.

yarn add --dev @nuxtjs/device
# Using npm
npm install -D @nuxtjs/device

Add it to the modules section of your nuxt.config:

{modules: ['@nuxtjs/device',]}

That's it, you can now use $device in your Nuxt app ✨

Flags

You can use these flags to detect the device type.

$device.isDesktop$device.isMobile$device.isTablet$device.isMobileOrTablet$device.isDesktopOrTablet$device.isIos$device.isWindows$device.isMacOS$device.isApple$device.isAndroid$device.isFirefox$device.isEdge$device.isChrome$device.isSafari$device.isSamsung$device.isCrawler

The user agent is also injected an accessible with $device.userAgent.

Usage

Composable

You can use the useDevice() composable inside a script setup to access the flags.

<scriptsetup>
const {isMobile} = useDevice();
</script>

Switch a view

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

Of course, you can use $device via this in a script.

Change a layout dynamically

exportdefault{layout: (ctx)=>ctx.$device.isMobile ? 'mobile' : 'default'}

Add a custom flag

You can add other flags to $device by adding a Nuxt plugin:

// plugins/custom-flag.jsexportdefaultfunction({ $device }){$device.isCustom=$device.userAgent.includes('Custom-Agent') ? true : false}

Options

defaultUserAgent option can be used when running npm run generate.

{modules: ['@nuxtjs/device'],device: {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'}}

refreshOnResize refresh flags when the window resized.(default: false)

{modules: ['@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

If the user-agent is Amazon CloudFront, this module checks the following headers :

• CloudFront-Is-Mobile-Viewer
• CloudFront-Is-Tablet-Viewer
• CloudFront-Is-Desktop-Viewer
• CloudFront-Is-Ios-Viewer
• CloudFront-Is-Android-Viewer

Here are the details about the headers:
Amazon CloudFront - Headers for determining the viewer's device type

Caution

isWindows and isMacOS flags are not available with CloudFront.

Cloudflare Support

This module checks the header CF-Device-Type.

Here are the details about the header: https://support.cloudflare.com/hc/en-us/articles/229373388-Cache-Content-by-Device-Type-Mobile-Tablet-Desktop-

License

MIT License

Data Source

This module uses crawler-user-agents to generate the regular expression that detect a crawler.