logo

tech blog技術メモ

Web制作に関連する技術を発信しています。

Nuxt.js2.13のアップデートを確認する

少々時間が経ってしまいましたが、6/19, 2020にリリースされたNuxt.js 2.13は目玉機能であるFull Static Generation（完全静的モード）を始めとした魅力的な機能が搭載されたので備忘録がてら記事にしておきたいと思います。

主な追加機能

個人的には何と言ってもFull Static Generationですが、その他にも主な機能としては下記のような機能が追加されています。

詳細は以下に記載があります。
https://github.com/nuxt/nuxt.js/releases/tag/v2.13.0

今回はその中から個人的に気になった下記についてメモをしておきたいと思います。

  • Full Static Generation（完全静的モード）
  • 動的ルーティングの自動生成
  • コンポーネントの自動インポート

Full Static Generation（完全静的モード）

Nuxt.jsは0.3.2とかなり前から静的に生成する機能は搭載されていましたが、Webページが遷移する際にAPIリクエストが発生する仕様でした。その為、APIサーバーが死んでいるとページ遷移の際にエラーが出てしまい、完全な静的サイトとは言えない状況でした。

今回のアップデートでこの事象が改善され完全に静的なページが生成されるようになりました。素晴らしい！

Full Static Generationの実装方法 nuxt generateを既に使用している場合、今回のアップデートで新たに導入されたtargetオプションをnext.config.jsに記述します。

export default {
  mode: 'universal',
  target: 'static',
}

staticモードはNuxt側に静的ファイルを出力するよう指示します。

あとはこれまで使用していたnuxt generateの代わりにnuxt build && nuxt exportを実行して完了です。

nuxt build && nuxt export

参考
Going Full Static - NuxtJS

生成されたページのローカルでの確認方法が追加された

生成したページの生成は新たに追加されたnuxt serveコマンドを実行することで簡単に確認できるようになりました。

nuxt serve

動的ルーティングの自動生成

Full Static Generationの次に個人的に感動したのが動的ルーティングの自動生成です。

動的ルーティングを行う場合、v2.12以前は下記のようにnuxt.config.jsで明示的に設定が必要でした。

export default {
  generate: {
    routes () {
      const { data } = await axios.get(`${apiUrl}/posts?_embed`)
      return data.map(post => {
        return {
          route: post.id,
          payload: post
        }
      })
    }
  }
}

それがv2.13以降は上記のような設定は一切不要で動的ルーティングを自動で生成してくれます。最高ですね。

参考
Going Full Static - NuxtJS

コンポーネントの自動インポート

コンポーネントを使用する際、v2.12以前は以下のようにimportでコンポーネントファイルをインポートし、componentsにインポートしたコンポーネントを登録するという作業が必要でした。

<template>
  <div>
    <Button />
  </div>
</template>

<script>
import Button from '~/components/Button'

export default {
  components: {
    Button
  }
}
</script>

v2.13以降ではnuxt.config.jsにcomponentsプロパティが追加され、値をtrueにすることで自動的にコンポーネントが読み込まれるようになりました。

components: true

これにより下記のようにコンポーネントのインポートおよび登録の記述は一切必要なくなりました。

<template>
  <div>
    <Button />
  </div>
</template>

<script>

export default {
}

なお、v2.13時点ではisプロパティを用いてコンポーネントを動的に切り替えられるDynamic Components（動的コンポーネント）には自動インポートは対応していないようです。

参考
自動インポートについて
Improve Your Developer Experience With Nuxt Components - NuxtJS

動的コンポーネントについて
動的コンポーネント - コンポーネントの基本 — Vue.js

以上、v2.13では魅力的なアップデートが満載でした。