1. next-vue-device-detector
A tiny device detector plugin of vue 3 for mobile
next-vue-device-detector
Package: next-vue-device-detector
Created by: dreambo8563
Last modified: Tue, 10 May 2022 15:09:11 GMT
Version: 0.0.1
License: ISC
Downloads: 3,278
Repository: https://github.com/dreambo8563/next-vue-device-detector

Install

npm install next-vue-device-detector
yarn add next-vue-device-detector

License: MIT
npm type definitions
npm

Next-vue-device-detector

next-vue-device-detector is a simple vue plugin to inspect the device type.

  • focus on mobile
  • vue 3 friendly
  • strong typed

Install

 npm install next-vue-device-detector --save

Quick Start

 import { createDeviceDetector } from "next-vue-device-detector";

export const device = createDeviceDetector()
createApp(App).use(device).mount('#app')

Methods

  • In Setup()
     const d = useDevice()
    console.log(d.android, "in setup");
  • Outside Setup()
 import { createDeviceDetector } from "next-vue-device-detector";

export const device = createDeviceDetector()
createApp(App).use(device).mount('#app')
console.log(device.android);

API list

you can get the following properties under device

 interface IDeviceDetector {
  ios: Boolean
  iphone: Boolean
  iphoneX: Boolean
  iPhoneXR: Boolean
  iPhoneXSMax: Boolean
  ipod: Boolean
  ipad: Boolean
  android: Boolean
  androidPhone: Boolean
  windows: Boolean
  mobile: Boolean
  dingding: Boolean //钉钉
  wechat: Boolean, // 微信
  wechatMiniApp: Boolean //微信小程序
}

eg.
on iphoneX

 const device = useDevice()

console.log(device.iphoneX) // true
console.log(device.ios) // true
console.log(device.android) // false

Contributors

Thanks goes to these wonderful people (emoji key):

Vincent Guo
Vincent Guo

💻 📖 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin