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

Nuxt

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

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.tsmodules内に以下のように、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

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

まとめ

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

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

Note一覧

コメント