1.0.6 • Published 6 years ago
nuxt-device-detect-cloudfront v1.0.6
nuxt-device-detect-cloudfront - based on original nuxt-device-detect
This module injects flags that indicate a device type into the context and the component instance. (Cloudfront supported).
Setup
- Add
nuxt-device-detect-cloudfront
to depedency using yarn or npm to your project - Add
nuxt-device-detect-cloudfront
to modules section of nuxt.config.js
{
modules: [
'nuxt-device-detect-cloudfront',
]
}
Options
defaultUserAgent
option can be used for npm run generate
.
{
modules: [
'nuxt-device-detect-cloudfront',
// set mobile user-agent
{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.
context.isDesktop
context.isMobile
context.isTablet
context.isMobileOrTablet
instance.$device.isDesktop
instance.$device.isMobile
instance.$device.isTablet
instance.$device.isMobileOrTablet
Usage
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>
Ofcourse, you can use $device
via this
in a script.
Change a layout dynamically
export default {
layout: (ctx) => ctx.isMobile ? 'mobile' : 'default'
}