Nuxt Device

Detect the type of device in your Nuxt applications.

• 👾  Playground

Installation

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.

If a request has no User-Agent header, $device.userAgent is an empty string and the device is treated as a desktop with an unknown OS and browser.

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>

Static Generation

Static generation (e.g. nuxt generate) is not supported. Prerendered pages are rendered once at build time without a user agent, so they are always treated as a desktop. Similarly, responses cached on the server (e.g. with swr or isr route rules) keep the flags of the request they were cached from.

To detect the device on each request, deploy with nuxt build instead. For a client-side only app, set ssr: false to detect the device in the browser.

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