ユーザーエージェントでデザインの表示を切り返えたい
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>
store配下のactionやmutationの処理で利用したい時
Nuxtのstore配下のactionやmutation、独自のTSの処理では、$deviceでは参照できないかと思います。
これだと参照できない
$device.isDesktop
そのような場合は、上記の公式サイトにもあるように、contextやinstance.$deviceで参照すればいけるかと思います!
まとめ
今回は、Nuxtでnuxt-device-detectを使用したデバイスやユーザーエージェントの判別方法を記事にしました!
リクエストヘッダーを自分でパースしてやっても良いとは思いますが、このようにプラグインを利用すると簡単にできますので、是非利用してみてください。
コメント