Help us understand the problem. What is going on with this article?

nuxt-user-agentを使ってUser-Agentを判定する

More than 1 year has passed since last update.

実際にNuxt.jsでUser-Agentを判定したいことがあると思いますが、今回nuxt-user-agentを使ってみてすごい使いやすかったので手順などを書こうと思いました。

手順

まずモジュールのインストールからです。

yarn add nuxt-user-agent
or
npm install nuxt-user-agent

でインストールをします。

次にnuxt.config.jsのセットアップです。
modules部分にnuxt-user-agentを追加します。

nuxt.config.js
modules: [
  'nuxt-user-agent',
]

これでセットアップは完了です。

次に実際に使ってみます。

asyncData

asyncData(context) {
  const deviceType = context.$ua.deviceType()
  return { deviceType }
}

method

methods: {
  something() {
    const deviceType = this.$ua.deviceType()
    this.deviceType = deviceType
  }
}

store

actions: {
  getDeviceType ({ commit }) {
    const deviceType = this.$ua.deviceType()
    commit('SET_DEVICE_TYPE', deviceType)
  }
}

template

<template>
  <div id="wrap">
    <div 
      v-if="$ua.deviceType() === 'pc'" 
      class="pc">PCです</div>
    <div 
      v-else-if="$ua.deviceType() === 'tablet'" 
      class="pc">TABLETです</div>
    <div 
      v-else-if="$ua.deviceType() === 'smartphone'" 
      class="pc">SPです</div>
  </div>
</template>

のような形で使用します。

また判定できる種類はこちらに載っています。

実際にnuxt-user-agentを使ってみましたが、かなり使いやすくまた判定できる種類が多いのですごいよかったです。個人的にUser-Agentの判定はmiddleware周りでやるよりもnuxt-user-agentを使ってUser-Agent判定した方がいいかなと思いました。

yakiniku0220
最近はReact Native触ってます。 VueやNuxt.jsなどが好きです。
https://github.com/ebarakazuhiro
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away