nuxt-device

2.1.0 • Public • Published

nuxt-device

npm version npm downloads License Standard JS

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

Package Sidebar

Install

npm i nuxt-device

Weekly Downloads

7

Version

2.1.0

License

MIT

Unpacked Size

5.64 kB

Total Files

4

Last publish

Collaborators

  • vmmendozae