【nuxt3】PCやスマホなど、デバイスを判定する

この記事の環境

    "nuxt": "^3.8.0"
    "@nuxtjs/device": "^3.1.1"（今回の記事で導入するモジュール）

@nuxtjs/deviceとは？

これです：device - Device detection module for Nuxt

nuxtのモジュール一覧に掲載があるdeviceというモジュールを利用します。

使い方

ドキュメントを見ればだいたいそのままなのですが、概要をさっくり書いておきますね。

1. インストール

#どちらか好きな方
yarn add --dev @nuxtjs/device
npm install -D @nuxtjs/device

2. nuxt.config.tsに記述

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/device'
  ],
  //他の設定
}

次に、scriptタグにたとえば次のように設定します：

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

その上で、次のように使用します：

<div v-if="$device.isMobile"> Mobile </div>
<div v-else> Mobileじゃない </div>

補足

ちなみに、以下のフラグが使えるそうです！

$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

便利。

safariやedgeの判定はいざというときに使うかもしれません…

再掲：device - Device detection module for Nuxt