nuxt-modules
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.xbranch.
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.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-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.