Nuxt.jsで「@nuxtjs/device」を使って、デバイス判定を行う

今回は「@nuxtjs/device」を使って、デバイス判定を行う方法について。具体的には、デバイス判定を行い、SPとPCでリンク先を別々にしようと思います。

Nuxt.jsで「@nuxtjs/device」を使って、SPとPCでリンク先を分ける

@nuxtjs/deviceモジュールのinstall

@nuxtjs/deviceモジュールをinstallします。

$ npm i @nuxtjs/device

リポジトリ：nuxt-community/device-module

設定ファイルでモジュールを読み込ませる

nuxt.config.jsファイルで@nuxtjs/deviceを読み込みます。

module.exports = {
  modules: {
    '@nuxtjs/device'
  }
}

使い回すためにmixinsフォルダ配下にjsファイルを作成

デバイスを判別してURLを切り分ける場面は、多々考えられるので、mixinsフォルダ配下に、DeviceJudger.jsファイルを作成します。

export default {
  data() {
    return {
      isSP: undefined
    }
  },
  mounted() {
    this.isSP = this.$device.isMobile;
  }
}

DeviceJudger.jsファイルを使用したいところで呼び出し

DeviceJudger.jsファイルを使用したいところで呼び出して、SPとPCでリンク先を切り分けることができます。

<template>
  <div>
    <a :href="exampleURL">example</a>
  </div>
<template>

<script>
import DeviceJudger from "@/mixins/DeviceJudger";

export default {
  mixins: [DeviceJudger],
  computed: {
    exampleURL() {
      if (this.isSP) {
        return "https://s.example.com" // sp用
      }
      return "https://example.com" // pc用
    }
  }
}
</script>

• UdemyでNuxt.jsを学べるおすすめの講座を厳選紹介！