Nuxt.jsを使っていて、ユーザーエージェントによって処理を切り替えたい。
みたいな場合に便利なプラグインの紹介記事です。
この手のプラグインは nuxt-community/awesome-nuxt で探すのが基本だと思いますが、残念ながらここに書かれてないのでググって探しました。
よさそうなのが2つあったのでそれらについて記載します。
nuxt-device-detect
dotneet/nuxt-device-detect: This is a nuxt.js module for detecting device type.
動作を確認できるデモページを用意しました。
https://nuxt-playground.netlify.com/plugins-sample/nuxt-device-detect/
シンプルにモバイルかPCかを判定したいときに使うと良さそうです。
判定処理も70行未満とシンプルなので、独自で簡易判定を書くときにも参考になりそう
nuxt-user-agent
fukuiretu/nuxt-user-agent: Nuxt.js module for handling User-Agent.
動作を確認できるデモページを用意しました。
https://nuxt-playground.netlify.com/plugins-sample/nuxt-user-agent
こちらのほうが判定できる種類が多いです。
というのも判定処理には woothee/woothee-js を使っているおかげですね。
nuxt-user-agent 自体は、 woothee を Nuxt 用にラッパーしたライブラリって感じです。
所感
あとから細かいハンドリングが必要になるケースが多そうな気がするため、nuxt-user-agent
を使っといたほうが無難かな、という気がします。