@nuxtjs/device

用於 Nuxt 的裝置檢測模組

Nuxt Device

在 Nuxt 應用程式中檢測裝置型別。

安裝

npx nuxi@latest module add device

!注意您可以在 2.x 分支上找到 Nuxt 2 版本的模組。

標誌

您可以使用以下標誌來檢測裝置型別

$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>