nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。

# [vue-mq](https://github.com/AlexandreBonaventure/vue-mq)とは

[vue-mq](https://github.com/AlexandreBonaventure/vue-mq)とは、Vueのtemplate上でのレスポンシブデザインをコントロールするに当たり、とても重宝する。例えば、以下のように記載するだけで、モバイルと他のサイズを出し分けてくれるナウいやつ。

例：

```vue:index.vue
<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で使えるように設定してみる。

```javascript:plugins/vue-mq.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で読み込み

```javascript:nuxt.config.js
module.exports = {
  plugins: [
    '~/plugins/vue-mq',
    ...
  ],
}
```

### 表示テスト 

ウィンドウサイズに合わせて、「sm」「ma」「lg」が出るようにindex.vueを修正

```pages/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にする。

```javascript:nuxt.config.js
module.exports = {
  plugins: [
    { src: '~/plugins/vue-mq', ssr: false },
  ],
}

```

動作した！！だがしかし…コンソールでエラーが表示される。気持ち悪いので、それらの解決方法も試してみる。

```console
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モードで使ってみる。

```javascript:nuxt.config.js
module.exports = {
  // mode: 'universal',
  mode: 'spa',
}
```

表示OK、コンソールエラーなし。good!と言いたいけど、今回はSSRで使いたいのよ。

## コンソールエラー回避案２

提供されているテンプレート(mq-layout)で使ってみる。

```vue:pages/index.vue
<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`で囲ってみれば…

```vue:pages/index.vue
<template lang="pug">
.main
  no-ssr
    p {{$mq}}
</template>
```

表示OK、コンソールエラー「あり」…無念

## コンソールエラー回避案4

vue-mqをフォークした[nuxt-mq](https://github.com/vanhoofmaarten/nuxt-mq)を使ってみる


### npmパッケージをインストール

```console
npm i nuxt-mq -s
```

### nuxt.config.jsで設定

vue-mqの場合はpluginsで設定していたけど、nuxt-mqの場合はnuxt.config.jsで設定する。

```javascript: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)関連の記事一覧

## 技術よりの記事

0. [nuxt.js(v2)のインストール〜ESLint設定まで](https://qiita.com/amishiro/items/9cd8007d46f91c8b5da2)
0. [nuxt.js(v2)の作業ディレクトリを整理](https://qiita.com/amishiro/items/9c31a3a9424de27efe28)
0. [nuxt.js(v2)のベースURLをターミナルからコントロール](https://qiita.com/amishiro/items/7c7af250368083216d8e)
0. [nuxt.js(v2)でpug/stylusを利用する](https://qiita.com/amishiro/items/38fe1b102d7e91a93ada)
0. [nuxt.js(v2)でIE11対応をする（CSS編）](https://qiita.com/amishiro/items/84b14108c749a0a0c966)
0. [nuxt.js(v2)でIE11対応をする（JS編）](https://qiita.com/amishiro/items/db37c6a56ddf7e214144)
0. [nuxt.js(v2)で絶対パス(https~)を取得する方法](https://qiita.com/amishiro/items/9d7ca6b239f604a40424) 
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい](https://qiita.com/amishiro/items/b7260116b282d2cf2756)
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす](https://qiita.com/amishiro/items/77e3c2546fa63cc69a62)

## よく使うプラグインのお話

0. [nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。](https://qiita.com/amishiro/items/f2e302fedf03c3d0f79e)
0. [nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。](https://qiita.com/amishiro/items/f70aca4797cd57bc51b5)
0. [nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!](https://qiita.com/amishiro/items/ccca406a9bda1863ab01)

## まとめ系

0. [nuxt.js(v2)でgenerate納品する前にやっておきたい設定](https://qiita.com/amishiro/items/11bd642728f6b5838189)
0. [nuxt.jsにおける「components」ディレクトリの規約（案）](https://qiita.com/amishiro/items/c7493f5e9375a0609bdc)