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

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

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

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

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

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

【Nuxt】ua-parser-jsでユーザーエージェントを判別する方法

Nuxtでユーザーエージェントやデバイスを判別したいNuxtでユーザーエージェントやデバイス、OSなどを判別したい時がありました！User-Agentのリクエストヘッダーを自分でパースしてやっても良いとは思いますが...

awesome-linus.com

2020.02.13

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

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

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

nuxt-community/device-module

Nuxt.js module for detecting device type. Contribute to nuxt-community/device-module development by creating an account on GitHub.

github.com

インストール

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

$ yarn add nuxt-device-detect

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

Macでyarnをインストールする方法

yarnをインストールしたい最近のローカル開発環境の構築は、Dockerで環境を構築するというのが一般的になりましたが、フロントエンドのローカル環境は、むしろ今ではローカルにインストールして進めるというのが一般的になってい...

awesome-linus.com

2019.04.11

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>

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

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

これだと参照できない

$device.isDesktop

nuxt-community/device-module

Nuxt.js module for detecting device type. Contribute to nuxt-community/device-module development by creating an account on GitHub.

github.com

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

まとめ

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

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