vue-mqとは
vue-mqとは、Vueのtemplate上でのレスポンシブデザインをコントロールするに当たり、とても重宝する。例えば、以下のように記載するだけで、モバイルと他のサイズを出し分けてくれるナウいやつ。
例：
<template lang="pug">
div
p(v-if="$mq === 'sm'") モバイル表示
p(v-else) その他の表示
</template>
ただ、「SSR」モードのときに、コンソールでエラーが出るのでどうしたらいいか調べてみた。
最初に結論
- SPAモードでは「vue-mq」を利用
- SSRモードでは「nuxt-mq」を利用
で使い分けると良い。ね。
以下、確認過程。
まずはエラーがでるところまで使ってみる。
npmパッケージをインストール
npm i vue-mq -s
vue-mq.jsを作成
ドキュメントを参考に、nuxt.jsで使えるように設定してみる。
import Vue from 'vue'
import VueMq from 'vue-mq'
Vue.use(VueMq, {
breakpoints: { // default breakpoints - customize this
sm: 450,
md: 1250,
lg: Infinity,
}
})
nuxt.config.jsで読み込み
module.exports = {
plugins: [
'~/plugins/vue-mq',
...
],
}
表示テスト
ウィンドウサイズに合わせて、「sm」「ma」「lg」が出るようにindex.vueを修正
<template lang="pug">
.main
p {{$mq}}
</template>
…でコケる
ブラウザ上に、window is not definedのエラーが表示されて動かない…けど焦らない。
ReferenceError
window is not defined
...
SSRではwindowsが取得される前に動作しようとする。ウィンドウサイズ取得して動くプラグインなので、windowsないよと怒られるのは仕方がないので、ちょっと修正していく。
対応
ssrをfalseにする
気を取り直して、vue-mq.js読み込み時にssrをfalseにする。
module.exports = {
plugins: [
{ src: '~/plugins/vue-mq', ssr: false },
],
}
動作した！！だがしかし…コンソールでエラーが表示される。気持ち悪いので、それらの解決方法も試してみる。
ERROR [Vue warn]: Property or method "$mq" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Src/pages/index.vue> at src/pages/index.vue
<Nuxt>
<Default> at src/layouts/default.vue
<Root>
コンソールエラー回避案１
SPAモードで使ってみる。
module.exports = {
// mode: 'universal',
mode: 'spa',
}
表示OK、コンソールエラーなし。good!と言いたいけど、今回はSSRで使いたいのよ。
コンソールエラー回避案２
提供されているテンプレート(mq-layout)で使ってみる。
<template lang="pug">
.main
mq-layout(mq="lg")
span Display on lg
mq-layout(mq="md+")
span Display on md and larger
mq-layout(:mq="['sm', 'lg']")
span Display on sm and lg
</template>
表示OK、コンソールエラーなし。good!と言いたいけど、もともとの使い勝手の良さが何処へ。
コンソールエラー回避案３（失敗版）
そうだ、困ったときのno-ssrで囲ってみれば…
<template lang="pug">
.main
no-ssr
p {{$mq}}
</template>
表示OK、コンソールエラー「あり」…無念
コンソールエラー回避案4
vue-mqをフォークしたnuxt-mqを使ってみる
npmパッケージをインストール
npm i nuxt-mq -s
nuxt.config.jsで設定
vue-mqの場合はpluginsで設定していたけど、nuxt-mqの場合はnuxt.config.jsで設定する。
module.exports = {
modules: [
['nuxt-mq']
],
'mq': {
defaultBreakpoint: 'default',
breakpoints: {
sm: 450,
md: 1250,
lg: Infinity,
}
}
...
}
表示OK、コンソールエラーなし。good!…だけど、初回表示時にdefaultBreakpointで設定した「default」一瞬表示されてしまう。
結論
- SPAモードでは「vue-mq」を利用
- SSRモードでは「nuxt-mq」を利用
で使い分けると良い。ね。
Link
以下、公開中のnuxt.js(v2)関連の記事一覧
技術よりの記事
- nuxt.js(v2)のインストール〜ESLint設定まで
- nuxt.js(v2)の作業ディレクトリを整理
- nuxt.js(v2)のベースURLをターミナルからコントロール
- nuxt.js(v2)でpug/stylusを利用する
- nuxt.js(v2)でIE11対応をする（CSS編）
- nuxt.js(v2)でIE11対応をする（JS編）
- nuxt.js(v2)で絶対パス(https~)を取得する方法
- nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
- nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす
よく使うプラグインのお話
- nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
- nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
- nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!