Skip to content

basitcodeenv/vue3-device-detect

Repository files navigation

vue3-device-detect

Version License vue GitHub last commit Downloads

Detect device type and render content based on device type

Quickstart

Install using

npm install @basitcodeenv/vue3-device-detect --save

Then, initalize the plugin in the starting point of your app (most likely src/main.js):

// main.ts
import VueDeviceDetect from '@basitcodeenv/vue3-device-detect'
Vue.use(vueDeviceDetect)

This will globally register the components DesktopView, MobileView and others and you will be able to use those right away.

<template>
  <DesktopView>
    <h1>This is rendered only in desktop browser</h1>
  </DesktopView>

  <MobileView>
    <h1>This is rendered only on mobile</h1>
  </MobileView>
</template>

Build-in components:

AndroidView
ChromeView
ChromiumView
ConsoleView
DesktopView
EdgeChromiumView
EdgeLegacyView
EdgeView
ElectronView
EmbeddedView
FirefoxView
IEView
IOSView
IPadView
IPhoneView
IPodView
LinuxView
MacOSView
MIUIView
MobileOnlyView
MobileSafariView
MobileView
OperaView
SafariView
SamsungBrowserView
SmartTVView
TabletView
WearableView
WindowsView
WinPhoneView
YandexView

You can also determine through the built-in API

// main.ts
import { isMobile } from '@basitcodeenv/vue3-device-detect'

API

Properties:

name type description
isAndroid boolean The OS is Android
isChrome boolean Browser is Chrome
isChromium boolean Browser is Chromium
isConsole boolean The device type is console
isDesktop boolean The device type is desktop
isEdge boolean Browser is Edge or Edge Chromium
isEdgeChromium boolean Browser is Edge Chromium
isEdgeLegacy boolean Browser is Edge
isElectron boolean Browser is Electron
isEmbedded boolean The device type is embedded
isFirefox boolean Browser is Firefox
isIE boolean Browser is Internet Explorer
isIOS boolean The OS is iOS
isIPad boolean is iPad
isIPhone boolean is iPhone
isIPod boolean is iPod
isLinux boolean The OS is Linux
isMacOS boolean The OS is Mac OS
isMIUI boolean Browser is MIUI Browser
isMobile boolean The device type is mobile or tablet
isMobileOnly boolean The device type is mobile
isMobileSafari boolean Browser is Mobile Safari
isOpera boolean Browser is Opera
isSafari boolean Browser is Safari
isSamsungBrowser boolean Browser is Samsung Browser
isSmartTV boolean The device type is smarttv
isTablet boolean The device type is tablet
isWearable boolean The device type is wearable
isWindows boolean The OS is Windows
isWinPhone boolean The OS is Windows Phone
isYandex boolean Browser is Yandex Browser

Functions:

name return type description
browserName string Return browser name
browserVersion string Return browser version
deviceModel string Return mobile device type (e.g Nexus 5)
deviceType string Return device type (mobile or tablet)
deviceVendor string Return mobile phone brand (e.g LG, Apple iPhone etc)
engineName string Return browser engine name (e.g Gecko for Firefox, Blink for Chrome)
engineVersion string Return browser engine version
getUA string Return user agent
osName string Return OS name
osVersion string Return OS version