nuxtでPCとSPでrenderするコンポーネントを分けたい

Question

nuxt.jsでPCとSPでrenderするコンポーネントを分けたいです。

pages/ 以下をUser Agentを元にしてrenderするコンポーネントを分けたいんですがどのようにするのが最適解なのでしょうか。

現在 https://github.com/hgoebl/mobile-detect.js これを使っているんですがこの場合コンポーネントなどはPCとSPの2つ作ってnuxt.config.jsも2つ作って両方をbuildする形にしています。
ただこれだとStoreが2つになって同じことを書かないといけないなど冗長なことになるので最適解ではないのではないかと思っています。
そのほかに要件としてSPの時にPCページを表示するというリンクがありそこを押すとPCのページが表示されるような仕組みにしなければならないので、ここも何かお知恵があれば教えていただきたいです。

どうするのが1番運用しやすい形なのでしょうか。よろしくお願いします。

Comments

[y_waiwai]

SPとはなに？

Answer 1

ちょっと冗長になってしまうかもしれませんが、
User Agent から判定した値 isDesktop によって、
Desktop と Mobile の component の使い分けをしてみました。

「PCページを表示するボタン」の click イベントで値を変更すれば、
Mobile でも Desktop の表示が出来ると思います。

<template lang="pug">
  desktop(v-if='isDesktop')
  mobile(v-else)
</template>

<script>
import Desktop from '~/components/templates/Foo/Desktop'
import Mobile from '~/components/templates/Foo/Mobile'

export default {
  components: {
    Desktop,
    Mobile
  },
  computed: {
    ...mapGetters('user', ['isDesktop'])
  }
}
</script>