Edited at

Nuxt.jsでユーザーエージェントを判別するプラグインの紹介

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行未満とシンプルなので、独自で簡易判定を書くときにも参考になりそう :bulb:


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 を使っといたほうが無難かな、という気がします。