Nuxt Device

Detect the type of device in your Nuxt applications.

See demo on CodeSandbox.

Installation

npx nuxi@latest module add device

Note

You can find the Nuxt 2 version of the module on the 2.x branch.

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:

<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

<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

enabled

Enables the module conditionally.

Default: true

Warning

This option is deprecated. It will be removed in the next major release.

refreshOnResize

Refreshes flags on window resize.

Default: false

Warning

This option is deprecated. It will be removed in the next major release.

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