nuxt-device-is

Nuxt-device-is

Library to detect mobile/tablet/desktop devices on server and in browser.

Installation

npm i nuxt-device-is

Usage

1. Add to nuxt.config.js module section

module.exports = {
    modules: [
        'nuxt-device-is',
    ],
};

2. Set yours breakpoints options for browser detection

module.exports = {
    NuxtDeviceIs: {
        breakpoints: {
            mobile: 720,
            tablet: 1024,
            laptop: 1440,
            desktop: 999999
        }
    },
};

That are default breakpoints.

3. 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']