@basitcodeenv/vue3-device-detect

Detect device type and render content based on device type

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'

Properties:

Functions: