ajerez / vue-mobile-detection Goto Github PK

View Code? Open in Web Editor NEW

Vue.js prototype function `this.$isMobile()` that returns a Boolean value depending on whether or not the user is browsing with a mobile

License: MIT License

JavaScript 47.75% HTML 27.94% Vue 24.31%

vue-mobile-detection's Introduction

IMPORTANT

Version 2 of this plugin only works with Vue 3. If you need Vue 2 compatibility install version 1.0.0

vue-mobile-detection

Vue.js global function this.$isMobile() that returns a Boolean value depending on whether or not the user is browsing with a mobile

Demo

https://ajerez.github.io/vue-mobile-detection/

Installation

With npm (Recommended)

npm i vue-mobile-detection

yarn

yarn add vue-mobile-detection

Usage

Plugin installation

import VueMobileDetection from "vue-mobile-detection";
import App from "./App.vue";

const app = createApp(App);
app.use(VueMobileDetection);

/* After the install you can use this.$isMobile() in all your vue components */

Using the plugin

<template>
  <div id="app">
    <!-- Use in template -->
    <div v-if="$isMobile()">MOBILE</div>
    <div v-else>DESKTOP OR TABLET</div>
  </div>
</template>

<script>
export default {
  created() {
    // Use in js
    console.log(this.$isMobile());
  }
};
</script>