» TechAcademyの無料体験

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

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

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

@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>

コメント

タイトルとURLをコピーしました