Nuxt Device
Detect the type of device in your Nuxt applications.
See demo on CodeSandbox.
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.
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
Amazon CloudFront Support
If the user agent is Amazon CloudFront, the module checks for the following headers:
CloudFront-Is-Android-ViewerCloudFront-Is-Desktop-ViewerCloudFront-Is-IOS-ViewerCloudFront-Is-Mobile-ViewerCloudFront-Is-Tablet-Viewer
Read more about determining the viewer's device type in the Amazon CloudFront docs.
!CAUTION
isWindowsandisMacOSflags 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.