Vue useDevice Composable

Usage

The composable is auto‑imported in Nuxt. It combines the platform detection from the Bitrix plugin with reactive screen‑size queries.

<script setup lang="ts">
const { isBitrixMobile, screen } = useDevice()
</script>

Platform detection is based on the User‑Agent header and is globally shared via useState.
Screen‑size flags are powered by useMediaQuery from VueUse, so they update reactively when the viewport changes.

On the server, screen‑size flags default to false. Hydration will work correctly because the client values will eventually take over.

API

The composable returns an object with the following properties:

Platform

Property	Type	Description
`platform`	`Readonly<{ name?: PlatformName, version?: string }>`	Raw platform state (readonly)
`version`	`ComputedRef<string \| undefined>`	Version string of the Bitrix app (if available)
`isWeb`	`ComputedRef<boolean>`	`true` when running in a regular web browser
`isBitrixMobile`	`ComputedRef<boolean>`	`true` inside the Bitrix24 mobile app
`isBitrixDesktop`	`ComputedRef<boolean>`	`true` inside the Bitrix24 desktop app

Screen

The screen object contains reactive flags for every Tailwind breakpoint (xs, sm, md, lg, xl, 2xl) and a few convenience shortcuts.

Property	Type	Description
`screen.current`	`ComputedRef<ScreenSize>`	The smallest active breakpoint: `'2xl' \| 'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'`
`screen.xs`	`ComputedRef<boolean>`	Width < 640px
`screen.sm`	`ComputedRef<boolean>`	Width ≥ 640px
`screen.md`	`ComputedRef<boolean>`	Width ≥ 768px
`screen.lg`	`ComputedRef<boolean>`	Width ≥ 1024px
`screen.xl`	`ComputedRef<boolean>`	Width ≥ 1280px
`screen['2xl']`	`ComputedRef<boolean>`	Width ≥ 1536px
`screen.isMobile`	`ComputedRef<boolean>`	Width < 768px (alias for `!screen.md`)
`screen.isTablet`	`ComputedRef<boolean>`	Width between 768px and 1023px (alias for `screen.md && !screen.lg`)
`screen.isDesktop`	`ComputedRef<boolean>`	Width ≥ 1024px (alias for `screen.lg`)
`screen.isLargeDesktop`	`ComputedRef<boolean>`	Width ≥ 1536px (alias for `screen['2xl']`)

Example

Basic usage – platform and mobile screen

<script setup lang="ts">
const { isBitrixMobile, screen } = useDevice()
</script>

<template>
  <div>
    <p v-if="isBitrixMobile">
      📱 You are using the Bitrix24 mobile app on a small screen.
    </p>
    <p v-else-if="screen.isMobile">
      👋 Regular web browser on a small screen.
    </p>
    <p v-else-if="!isBitrixMobile && (!screen.isMobile)">
      💻 Regular web browser on a desktop.
    </p>
    <p v-else>
      🌐 Other combination.
    </p>
  </div>
</template>

Conditional rendering based on current breakpoint

<script setup lang="ts">
const { screen } = useDevice()

const variantByScreen = computed(() => {
  switch (screen.value.current) {
    case 'xs': return 'filled'
    case 'sm': return 'outline-accent-2'
    case 'md': return 'tinted-no-accent'
    case 'lg': return 'tinted-warning'
    case 'xl': return 'tinted-alert'
  }

  return 'selection'
})
</script>

<template>
  <div>
    <B24Card :variant="variantByScreen">
      <div v-if="screen.current === 'xs'">
        Extra small screen (&lt; 640px)
      </div>
      <div v-else-if="screen.current === 'sm'">
        Small screen (640px – 767px)
      </div>
      <div v-else-if="screen.current === 'md'">
        Medium screen (768px – 1023px)
      </div>
      <div v-else-if="screen.current === 'lg'">
        Large screen (1024px – 1279px)
      </div>
      <div v-else-if="screen.current === 'xl'">
        Extra large screen (1280px – 1535px)
      </div>
      <div v-else>
        2XL screen (&ge; 1536px)
      </div>
    </B24Card>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const { screen } = useDevice()

const variantByScreen = computed(() => {
  switch (screen.value.current) {
    case 'xs': return 'filled'
    case 'sm': return 'outline-accent-2'
    case 'md': return 'tinted-no-accent'
    case 'lg': return 'tinted-warning'
    case 'xl': return 'tinted-alert'
  }

  return 'selection'
})
</script>

<template>
  <div>
    <B24Card :variant="variantByScreen">
      <div v-if="screen.current === 'xs'">
        Extra small screen (&lt; 640px)
      </div>
      <div v-else-if="screen.current === 'sm'">
        Small screen (640px – 767px)
      </div>
      <div v-else-if="screen.current === 'md'">
        Medium screen (768px – 1023px)
      </div>
      <div v-else-if="screen.current === 'lg'">
        Large screen (1024px – 1279px)
      </div>
      <div v-else-if="screen.current === 'xl'">
        Extra large screen (1280px – 1535px)
      </div>
      <div v-else>
        2XL screen (&ge; 1536px)
      </div>
    </B24Card>
  </div>
</template>

Using screen flags in template logic

<script setup lang="ts">
const { screen } = useDevice()
</script>

<template>
  <div class="flex flex-col gap-2">
    <B24Button :color="screen.isMobile ? 'air-primary' : 'air-secondary'">
      Adaptive button
    </B24Button>
  </div>
</template>

Combine with Tailwind CSS classes

Because the plugin already adds data-platform and data-version attributes to the <html> tag, you can use Tailwind variants like bitrix-mobile: directly in your templates.

<template>
  <div class="hidden bitrix-mobile:block">
    📱 This is only visible inside the Bitrix24 mobile app.
  </div>
  <div class="hidden bitrix-desktop:block">
    💻 This is only visible inside the Bitrix24 desktop app.
  </div>
  <div class="hidden web:block">
    🌐 This is only visible in a regular browser.
  </div>
</template>

useConfetti

Performant confetti animation in the browser

useOverlay

A composable to programmatically control overlays in App.

useDevice New