nuxt-device

nuxt-device

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

See demo on CodeSandbox.

Setup

Add nuxt-device to the dev dependencies using npm to your project.

npm install nuxt-device

Create plugins/device.js

import Vue from 'vue'
import deviceMixins from 'nuxt-device'

Vue.mixin(deviceMixins)

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

{
    plugins: [
      { src: '@/plugins/device.js' }
    ],
}

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

Flags

You can use these flags to detect the device type.

isDesktop
isMobile
isTablet
isMobileOrTablet
isDesktopOrTablet
isIos
isAndroid
isWindows
isMacOS

Usage

Switch a view

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

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

Change a layout dynamically

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

License

MIT License