nuxt-device-is
v1.2.3
Published
Library to detect mobile/tablet/desktop devices on server and in browser.
Downloads
792
Readme
Nuxt-device-is
Library to detect mobile/tablet/desktop devices on server and in browser.
Installation
npm i nuxt-device-is
Usage
- Add to nuxt.config.js module section
module.exports = {
modules: [
'nuxt-device-is',
],
};
- Set yours breakpoints options for browser detection
module.exports = {
NuxtDeviceIs: {
breakpoints: {
mobile: 720,
tablet: 1024,
laptop: 1440,
desktop: 999999
}
},
};
That are default breakpoints.
- Use $deviceIs instance wherever you want:
In Template section
<template>
<button v-if="$deviceIs.mobile">mobile button</button>
<button v-else-if="$deviceIs.desktop">desktop button</button>
</template>
In JavaScript section
export default {
data() {
return {
children: [
{ ... },
{ ... },
{ ... },
{ ... },
{ ... },
{ ... },
{ ... },
{ ... },
]
};
},
computed: {
childrenList() {
switch (this.$deviceIs.device) {
case 'mobile':
return [...this.children].slice(0, 4);
case 'tablet':
return [...this.children].slice(0, 6);
default:
return this.children;
}
},
},
}
Available computed options
this.$deviceIs.mobile;
this.$deviceIs.tablet;
this.$deviceIs.laptop;
this.$deviceIs.desktop;
this.$deviceIs.сrawler; // if device is search bot
this.$deviceIs.pc; // if device is laptop or desktop
Available device option values
['mobile', 'tablet', 'laptop', 'desktop']