【Nuxt】nuxt-device-detectでデバイスやユーザーエージェントを判別する方法

ユーザーエージェントでデザインの表示を切り返えたい
nuxt-device-detectでの切り替え方法
store配下のactionやmutationの処理で利用したい時
まとめ

ユーザーエージェントでデザインの表示を切り返えたい

Nuxtでスマホやタブレット、PCの表示分けをデバイスやユーザーエージェントで切り替えたい時がありました！

Nuxt Communityから出ているnuxt-device-detectを使って簡単に実現できたので、備忘録として残しておきたいと思います。

またデバイスやユーザーエージェントでの切り替えは、ua-parser-jsを使用しても簡単にできました！

ua-parser-jsでの詳しいやり方はこちらへ纏めています！

nuxt-device-detectでの切り替え方法

こちらがnuxt-device-detectの公式サイトです。

基本的にはこちらの公式サイトのREADMEの手順を実施して試していきたいと思います。

インストール

まずは、yarnを使用してnuxt-device-detectをインストールします。

$ yarn add nuxt-device-detect

yarnって何？とかyarnをまだインストールしていないよって方はこちらの記事を参考にyarnをインストールしてください！

nuxt.config.tsの設定

nuxt.config.tsのmodules内に以下のように、nuxt-device-detectを追加すれば完了です！

これでもう使えるようになります！

  modules: [
    'nuxt-device-detect',
  ],

使い方

使い方は簡単です！

以下のサンプルをpages配下に任意の名前で、sample.vueなどとして作成してください！

アクセスしたデバイスによって、Desktop、Tablet、Mobileと表示が切り替わっているのがわかるかと思います！

<template>
  <div>
    <div v-if="$device.isDesktop">Desktop</div>
    <div v-else-if="$device.isTablet">Tablet</div>
    <div v-else>Mobile</div>
  </div>
</template>

Nuxtのpages配下はそのままルーティングの設定になりますので、pages/sample.vueのようなファイルを作成した場合は、http://localhost:3000/sample のようなURLでアクセスできます。

store配下のactionやmutationの処理で利用したい時

Nuxtのstore配下のactionやmutation、独自のTSの処理では、$deviceでは参照できないかと思います。

これだと参照できない

$device.isDesktop

そのような場合は、上記の公式サイトにもあるように、contextやinstance.$deviceで参照すればいけるかと思います！

まとめ

今回は、Nuxtでnuxt-device-detectを使用したデバイスやユーザーエージェントの判別方法を記事にしました！

リクエストヘッダーを自分でパースしてやっても良いとは思いますが、このようにプラグインを利用すると簡単にできますので、是非利用してみてください。