@nuxtjs/device

This module injects flags that indicate a device type into the context and the component instance.

Setup for Nuxt3

If you use Nuxt2.x use @nuxtjs/device 2.x.

Add @nuxtjs/device to the dev dependencies using yarn or npm to your project.

yarn add --dev @nuxtjs/device# Using npmnpm install -D @nuxtjs/device

Add it to the modules section of your nuxt.config:

{  modules: [   '@nuxtjs/device',  ]}

That's it, you can now use $device in your Nuxt app ✨

Flags

You can use these 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 an accessible with $device.userAgent.

Usage

Composable

You can use the useDevice() composable inside a script setup to access the flags.

<script setup>const { isMobile } = useDevice();</script>

Switch a view

<template>  <section>    <div v-if="$device.isDesktop">      Desktop    </div>    <div v-else-if="$device.isTablet">      Tablet    </div>    <div v-else>      Mobile    </div>  </section></template>

Of course, you can use $device via this in a script.

Change a layout dynamically

export default {  layout: (ctx) => ctx.$device.isMobile ? 'mobile' : 'default'}

Add a custom flag

You can add other flags to $device by adding a Nuxt plugin:

// plugins/custom-flag.jsexport default function ({ $device }) {  $device.isCustom = $device.userAgent.includes('Custom-Agent') ? true : false}

Options

defaultUserAgent option can be used when running npm run generate.

{  modules: ['@nuxtjs/device'],  device: {    defaultUserAgent: 'Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Mobile Safari/537.36'  }}

refreshOnResize refresh flags when the window resized.(default: false)

{  modules: ['@nuxtjs/device'],  device: {    refreshOnResize: true  }}

Note that the default user agent value is set to 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.