Upgrade to Pro — share decks privately, control downloads, hide ads and more …

nuxt-mqのGooglebot検証 /verification googlebot usi...

inosy22
July 31, 2019

nuxt-mqのGooglebot検証 /verification googlebot using nuxt-mq

Roppongi.vue#2 LT発表資料
Nuxt.jsのライブラリである『nuxt-mq』を使った際、
クライアントレンダリングが2019年5月にアップデートされたGooglebotから正常に解釈されるかの検証の内容です。

inosy22

July 31, 2019
Tweet

More Decks by inosy22

Other Decks in Programming

Transcript

  1. Nuxt.jsで設定してみる nuxt.config.js の一部 → `defaultBreakPoint` が SSRの初期値 { *** modules:

    [ [ 'nuxt-mq', { // Default breakpoint for SSR defaultBreakpoint: 'lg', breakpoints: { sm: 550, // 画面サイズ小の最大width md: 1250, // 画面サイズ中の最大width lg: Infinity // 画面サイズ大の最大width } } ] ] *** }
  2. VueComponentの出し分け記述 `<mq-layout>` タグで 定義したサイズの時に出す コンポーネントを定義する <div> <!-- 画面サイズ大の場合の表示 --> <mq-layout

    mq="lg"> <LargeComponent/> </mq-layout> <!-- 画面サイズ中の場合の表示 --> <mq-layout mq="md"> <MediumComponent/> </mq-layout> <!-- 画面サイズ小の場合の表示 --> <mq-layout mq="sm"> <SmallComponent/> </mq-layout> </div>