nm

nuxt-mobile

Nuxt mobile and device detection plugin for client side and SSR

Showing:

Popularity

Downloads/wk

89

GitHub Stars

23

Maintenance

Last Commit

8mos ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

0.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

📱 Nuxt Mobile Detect

nuxt-mobile-detect is a wrapper around mobile-detect.js for nuxtjs. It can be used client side and server side.

Note: @nuxtjs/device is another nuxt package for mobile device detection. nuxt-mobile-detect adds ~27.5kb of overhead and @nuxtjs/device only adds ~4.5kb, many projects won't need the full capabilities of mobile-detect.js and @nuxtjs/device would satisfy their use case.

Setup

  • Add nuxt-mobile-detect dependency using npm or yarn
npm i nuxt-mobile
yarn add nuxt-mobile
  • Add nuxt-mobile-detect to the modules section of nuxt.config.js
{
  modules: [
    'nuxt-mobile'
 ]
}

Usage

asyncData (server-side)

asyncData({app}) {
  let mobile = app.$mobileDetect.mobile()
}

methods/created/mounted/etc (client-side)

method() {
  let mobile = this.$mobileDetect.mobile()
}

Available Methods

For more information please refer to the mobile-detect.js github page.

Example User Agent

'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
    ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
    ' Version/4.0 Mobile Safari/534.30'
console.log( this.$mobileDetect.mobile() );          // 'Sony'
console.log( this.$mobileDetect.phone() );           // 'Sony'
console.log( this.$mobileDetect.tablet() );          // null
console.log( this.$mobileDetect.userAgent() );       // 'Safari'
console.log( this.$mobileDetect.os() );              // 'AndroidOS'
console.log( this.$mobileDetect.is('iPhone') );      // false
console.log( this.$mobileDetect.is('bot') );         // false
console.log( this.$mobileDetect.version('Webkit') );         // 534.3
console.log( this.$mobileDetect.versionStr('Build') );       // '4.1.A.0.562'
console.log( this.$mobileDetect.match('playstation|xbox') ); // false

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100