LoginSignup
17
12

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-25

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

17
12
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
12