@nuxtjs/device

Nuxt用のデバイス検出モジュール

401Kダウンロード•978スター•v3.2.4

Nuxt Device

Nuxtアプリケーションでデバイスの種類を検出します。

インストール

npx nuxi@latest module add device

!NOTE モジュールのNuxt 2バージョンは、2.xブランチにあります。

フラグ

以下のフラグを使用して、デバイスの種類を検出できます。

$device.isDesktop
$device.isMobile
$device.isTablet
$device.isMobileOrTablet
$device.isDesktopOrTablet
$device.isIos
$device.isWindows
$device.isMacOS
$device.isApple
$device.isAndroid
$device.isFirefox
$device.isEdge
$device.isChrome
$device.isSafari
$device.isSamsung
$device.isCrawler

ユーザーエージェントも注入され、$device.userAgentでアクセスできます。

クローラー検出は、crawler-user-agentsパッケージによって提供されます。

使用方法

script setup内でuseDevice()コンポーザブルを使用するか、テンプレート内で直接$deviceヘルパーを使用できます。

<template>
  <div>
    <div v-if="$device.isDesktop">Desktop</div>

    <div v-else-if="$device.isTablet">Tablet</div>

    <div v-else>Mobile</div>
  </div>
</template>

<script setup>
const { isMobile } = useDevice()
</script>

レイアウトを動的に変更する

<template>
  <div>
    <NuxtLayout :name="$device.isMobile ? 'mobile' : 'default'">
      <!-- page content -->
    </NuxtLayout>
  </div>
</template>

<script setup>
definePageMeta({
  layout: false
})
</script>