nuxt-device-detect
This module injects flags that indicate a device type into the context and the component instance.
Setup
- Add
nuxt-device-detect
to depedency using yarn or npm to your project - Add
nuxt-device-detect
to modules section of nuxt.config.js
modules: 'nuxt-device-detect'
Options
defaultUserAgent
option can be used for npm run generate
.
modules: 'nuxt-device-detect' 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'
Added flags
you can use these flags to detect the device type.
contextisDesktopcontextisMobilecontextisTabletcontextisMobileOrTabletcontextisDesktopOrTabletcontextisIoscontextisWindowscontextisMacOS instance$deviceisDesktopinstance$deviceisMobileinstance$deviceisTabletinstance$deviceisMobileOrTabletinstance$deviceisDesktopOrTabletinstance$deviceisIosinstance$deviceisWindowsinstance$deviceisMacOS
CloudFront Support
If a user-agent is 'Amazon CloudFront', nuxt-device-detect checks the both headers 'CloudFront-Is-Mobile-Viewer' and 'CloudFront-Is-Tablet-Viewer'.
Here are the details about the headers: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-device
Caution
isIos
, isWindows
and isMacOS
flags are not available with CloudFront.
Usage
Switch a view
Desktop Tablet Mobile
Ofcourse, you can use $device
via this
in a script.
Change a layout dynamically
ctxisMobile ? 'mobile' : 'default'