Detect the type of device in your Nuxt applications.
See demo on CodeSandbox.
npx nuxt module add deviceYou 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.
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><template>
<div>
<NuxtLayout :name="$device.isMobile ? 'mobile' : 'default'">
<!-- page content -->
</NuxtLayout>
</div>
</template>
<script setup>
definePageMeta({
layout: false
})
</script>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
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
isWindows and isMacOS flags are not available in Amazon CloudFront.
This module checks for the CF-Device-Type header.
Read more about the device type detection in the Cloudflare docs.
