vue3-device-detect

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