「Nuxt.jsビギナーズガイド」の感想・備忘録3

Nuxt．jsビギナーズガイド

posted with ヨメレバ

花谷拓磨シーアンドアール研究所 2018年10月

Nuxt.jsの基本

Nuxt.jsの基本

レイアウト

コンテナ、ナビ、フッターなどの共通化は、Vue.jsで開発する際の悩みのタネである。
Nuxt.jsのレイアウト機能を使うと、簡単に共通化を実現することができる。

<template>
  <ul>
    <li><nuxt-link to="/">home</nuxt-link></li>
    <li><nuxt-link to="/axios">axios</nuxt-link></li>
  </ul>
</template>

<template>
  <div>
    <AppNavigation />
    <hr>
    <nuxt/>
  </div>
</template>

<script>
import AppNavigation from '~/components/AppNavigation.vue'
export default {
  components: {
    AppNavigation
  }
}
</script>

複数のレイアウトの管理

例えばlayouts/single.vueというファイルを作成した場合、コンポーネントで以下のように指定する。
（何も指定しない場合は、layouts/default.vueが使用される）

export default {
  layout: 'single',
  // 以下省略
}

最も利用するテンプレートをdefault.vueとし、利用が少ないテンプレートを別のファイル名で作成するべきである。（default.vueは使用時にlayout: 'default'と記述する必要がないため）

ミドルウェアとは

任意のルーティングへのアクセス時に最初に読み込まれ、SSR処理などの前に処理を実行させることができる仕組み。 (ユーザーエージェントを判定してリダイレクト、認証・認可によるリダイレクト、など)
ミドルウェアはexport defaultで関数を返すファイルである必要がある。

export default () => {
  if (process.browser) {
    console.log('browser');
  } else {
    console.log('SSR');
  }
}

nuxt.config.jsに以下を追加

router: {
  middleware: [
    'hoge',
  ]
},

以下のようにすると、任意のURLに対してリダイレクトさせることができる。

export default ({route, redirect}) => {
  if (route.path === '/test1') {
    return redirect('/test2')
  }
}

プラグインとは

特定の処理をグローバルに登録するための仕組み。
利用パターンは以下の2つである。
- moment.jsなどアプリケーション全体で必ず使用するライブラリの導入
- ルーティングフックやCDNコードの読み込みなど共通処理の実装
SSRの場合、ミドルウェアはサーバサイドで、プラグインはクライアントサイドで実行されるという違いがある。
utilsのような独自ディレクトリを作成して運用することも不可能ではないが、プラグインとして作成することで2つのメリットがある。
- Nuxt.jsの規約の上での開発が可能になる
- SSR時に呼び出すかどうかを簡単に切り替えることができる
  windowやdocumentオブジェクトに依存した処理の場合、SSRではエラーとなってしまう。
  これを防ぐために、自分でNuxt.jsが提供する環境変数であるprocess.browserを利用する方法もあるが、プラグイン化している場合はnuxt.config.jsでssr: falseとするだけでよくなる。

プラグインのサンプル

VueRouterのbeforeEachフックでロギングするサンプル。

export default ({ app }) => {
  app.router.beforeEach((to, from, next) => {
    console.log(`[ROUTER] move to '${to.fullPath}'`)
    next()
  })
}

plugins: [
  { src: '~/plugins/logger', ssr: true }
],