!Nuxt banner

Nuxt Device

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

Detect the type of device in your Nuxt applications.

See demo on CodeSandbox.

Installation

``bash
npx nuxt module add device
`

Flags

You can use the following flags to detect the device type:

- $device.isDesktop
- $device.isMobile
- $device.isTablet
- $device.isMobileOrTablet
- $device.isDesktopOrTablet
- $device.isIos
- $device.isLinux
- $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 and accessible with $device.userAgent.

The crawler detection is powered by the crawler-user-agents package.

Usage

You can either use the useDevice() composable inside a script setup, or the $device helper directly in the template:

`vue



`

$3

`vue



`

$3

#### defaultUserAgent

Sets the default value for the user-agent header (useful when running npm run generate).

Default: 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

Amazon CloudFront Support

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

- CloudFront-Is-Android-Viewer
- CloudFront-Is-Desktop-Viewer
- CloudFront-Is-IOS-Viewer
- CloudFront-Is-Mobile-Viewer
- CloudFront-Is-Tablet-Viewer

Read more about determining the viewer's device type in the Amazon CloudFront docs.

> [!CAUTION]
> isWindows and isMacOS flags are not available in Amazon CloudFront.

Cloudflare Support

This module checks for the CF-Device-Type` header.

Read more about the device type detection in the Cloudflare docs.

License

MIT License


[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/device/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@nuxtjs/device

[npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/device.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/device

[license-src]: https://img.shields.io/github/license/nuxt-modules/device.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://github.com/nuxt-modules/device/blob/main/LICENSE

[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com