今回は「@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>
Nuxt.js関連のおすすめUdemy講座
Nuxt.js関連のおすすめ書籍
リンク
コメント