Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

vue-mqとは

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

例:

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

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で読み込み

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

nuxt.config.js
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>

コンソールエラー回避案1

SPAモードで使ってみる。

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

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

コンソールエラー回避案2

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

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!と言いたいけど、もともとの使い勝手の良さが何処へ。

コンソールエラー回避案3(失敗版)

そうだ、困ったときのno-ssrで囲ってみれば…

pages/index.vue
<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で設定する。

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

技術よりの記事

  1. nuxt.js(v2)のインストール〜ESLint設定まで
  2. nuxt.js(v2)の作業ディレクトリを整理
  3. nuxt.js(v2)のベースURLをターミナルからコントロール
  4. nuxt.js(v2)でpug/stylusを利用する
  5. nuxt.js(v2)でIE11対応をする(CSS編)
  6. nuxt.js(v2)でIE11対応をする(JS編)
  7. nuxt.js(v2)で絶対パス(https~)を取得する方法
  8. nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
  9. nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす

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

  1. nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
  2. nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
  3. nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!

まとめ系

  1. nuxt.js(v2)でgenerate納品する前にやっておきたい設定
  2. nuxt.jsにおける「components」ディレクトリの規約(案)
amishiro
5年近く作っていた自作テンプレートから離れて、最近はnuxtで開発してる。フロントエンドの未来は明るい。寂しいのでフォロープリーズ。
https://amiten.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away