# @nuxtjs/device

> Device detection module for Nuxt

Latest version **4.0.0** (published 2025-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @nuxtjs/device
pnpm add @nuxtjs/device
yarn add @nuxtjs/device
bun add @nuxtjs/device
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 4.0.0 |
| Published | 2025-12-09 |
| First published | 2019-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 183.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1005 |
| Maintainers | pi0, atinux, danielroe, antfu, devneko, damianglowala |

## Links

- npm: https://www.npmjs.com/package/@nuxtjs/device
- Repository: https://github.com/nuxt-modules/device
- Homepage: https://github.com/nuxt-modules/device#readme
- Issues: https://github.com/nuxt-modules/device/issues
- npm.io page: https://npm.io/package/@nuxtjs/device

## Dependencies (1)

- [defu](https://npm.io/package/defu.md) ^6.1.4

## Recent versions

- 4.0.0 (latest) — 2025-12-09
- 2.3.0 (2x) — 2023-09-16
- 3.2.4 — 2024-09-19
- 3.2.3 — 2024-09-17
- 3.2.2 — 2024-08-29
- 3.2.1 — 2024-08-29
- 3.2.0 — 2024-08-28
- 3.1.1 — 2023-09-16
- 2.2.0 — 2023-02-15
- 3.1.0 — 2023-02-08
- 3.0.0 — 2022-11-12
- 2.1.0 — 2021-04-12
- 2.0.1 — 2021-02-27
- 2.0.0 — 2021-01-27
- 1.2.7 — 2020-02-14
- … 6 more at https://npm.io/package/@nuxtjs/device/versions

## README

![Nuxt banner](./.github/assets/banner.png)

# 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](https://codesandbox.io/s/github/nuxt-community/device-module).

## 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](https://github.com/monperrus/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
<template>
  <div>
    <div v-if="$device.isDesktop">Desktop</div>

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

    <div v-else>Mobile</div>
  </div>
</template>

<script setup>
const { isMobile } = useDevice()
</script>
```

### Changing Layout Dynamically

```vue
<template>
  <div>
    <NuxtLayout :name="$device.isMobile ? 'mobile' : 'default'">
      <!-- page content -->
    </NuxtLayout>
  </div>
</template>

<script setup>
definePageMeta({
  layout: false
})
</script>
```

### Options

#### `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](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/adding-cloudfront-headers.html#cloudfront-headers-device-type).

> [!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](https://developers.cloudflare.com/automatic-platform-optimization/reference/cache-device-type).

## License

[MIT License](./LICENSE)

<!-- Badges -->
[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

---
_Source: https://npm.io/package/@nuxtjs/device · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._