nuxt (3).png
Sep 23, 2018

Nuxt.js v2.0.0がリリースされたので触ってみた【変更点まとめ】

去る2018年9月21日にVue.jsのユニバーサルフレームワークであるNuxt.jsのメジャーアップデート版、v2.0.0がリリースされました。

Embedded content: https://github.com/nuxt/nuxt.js/releases/tag/v2.0.0

Embedded content: https://medium.com/@nuxt_js/nuxt-js-2-0-webpack-4-esm-modules-create-nuxt-app-and-more-6936ce80d94c

思えば3月にv2.0.0がリリース準備中であることが発表されてからはや半年。首を長くして待っていた開発者の方も多いと思います。

自分も2月のVue conf AmsterdamでChopin brothersの口からv2.0.0の事を聞いてから、今か今かと待ちわびていた一人です。

v2.0.0でNuxtがどう進化したのか、早速レビューしていきたいと思います。

create-nuxt-app

Vue.jsの開発者ツールとしては以前よりVue CLIが提供されていましたが、今回新たにNuxt向けのコマンドラインツールであるcreate-nuxt-appがリリースされました。

(2018/12/10 追記: create-nuxt-app自体は以前よりリリースされていたようです)

Embedded content: https://github.com/nuxt-community/create-nuxt-app

公式ではnpxで利用する方法も紹介されていますが、今回はyarnでグローバルインストールしたものを使ってみましょう。

$ yarn global add create-nuxt-app
$ create-nuxt-app MyProject

create-nuxt-appコマンドを実行すると複数のオプション画面が表示されます

create-nuxt-app

  • Project name: アプリケーションの名前
  • Project description: アプリケーションの詳細な説明
  • Use a custom server framework: Nuxtアプリケーションの内部で利用されるサーバーフレームワークを選択
  • Use a custom UI framework : デフォルトで適用されるUIフレームワークを選択
  • Choose rendering mode: ユニバーサルアプリケーションを作成するか、SPAを作成するかを選択
  • Use axios module: HTTPクライアントとしてNuxt公式のAxios moduleを使用するかどうかを選択
  • eslint: Linterとしてeslintを利用するかどうかを選択
  • Author name: 管理者の名前を入力します
  • Choose a package manager: パッケージマネージャーとしてnpmもしくはyarnのどちらを利用するか選択

いくつか詳細に見ていきましょう。

Custom Server Framework

本バージョンのNuxtから、内部で利用されるサーバーフレームワークをユーザーが選択できるようになりました。(選択しないこともできます)

nuxt-cli

v2.0.0の段階で選択できるのは、

の6つです。expressやkoaなどのメジャーどころから、zeit社のmicroのような通好みのものまで揃っているのが面白いですね。

Custom UI Framework

こちらも今回から導入された新しい機能。プロジェクトの作成時に適用するUIフレームワークを選択できるようになりました。

20180922221827

Vue.jsアプリケーションのUIフレームワーク人気筆頭にあげられるvuetify、element-ui以外にも、多種多彩な選択肢が用意されていますね。

アプリケーションが作成されたら以下のコマンドで立ち上げてみましょう。

$ cd myProject
$ yarn install
$ yarn dev

20180923001407

なんと server/index.jsに const { Nuxt, Builder } = require('nuxt-edge')の記述が残っており、落ちてしまいましたwwwどうやらみなさん報告している問題のようですね。

require('nuxt')に直したら、気を取り直してもう一度。

20180923001329

無事にNuxtアプリケーションが立ち上がりました！

Webpack 4 & Babel 7

WebpackとBabelがそれぞれ最新のメジャーバージョンへとアップデートされました。

それぞれのライブラリの詳しいアップデート内容の解説は、Sean Larkinの記事とBabel公式の記事、にゆずります。

Embedded content: https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

Embedded content: https://babeljs.io/blog/2018/08/27/7.0.0

要点だけまとめると、

  • モジュールバンドリングが最大98%高速化
  • build.dllの廃止(用意しなくてもWebpackが十分速くなったので)
  • ES Modulesをアプリケーション全体で使えるようになった( nuxt.config.jsでも import/exportで書ける)
  • Web Assemblyのサポート
  • .mjsファイルのサポート
  • babel.config.jsのサポート

等々あげるとキリがありません。Nuxt独自の vendor管理は基本的には廃止され、Webpackの仕組みを使えとの方針みたいですね。Vue, vue-router, babel runtimeのようなコアパッケージについては、自動的にNuxtがCache Groupに追加してくれるとのことです。(この辺り調査不足)

Code Splitting周りも大きな変更があるようです。今まではNuxtが自動的に /layoutチャンクを分割してくれていましたが、今後は nuxt.config.js内の build.splitChunks.layouts: trueを設定しなければいけません。デフォルトの挙動では pluginsや storeのようにメインのエントリポイントで出力されるファイルに統合されるとのこと。build.optimization.splitChunksを通してより複雑な挙動をWebpackに指示できるようになったのはありがたいですね。

v1系のNuxtアプリケーションはWebpackやBabelの最新版へのマイグレート作業がとても大変だったので、デフォルトで最新版が組み込まれているのは嬉しい！

その他の機能

watchQuery

watchQueryでURLのクエリストリングを監視し、変更があった場合に asyncDataや layout等の本来はコンポーネント生成時に1度しか呼ばれない関数を再度実行できるようになりました。

現在のライフサイクルを特定するため、 keyプロパティでクエリストリングに応じたユニークなComponent Identifierを設定してあげる必要があります。

Ignore files

/pages, /layout, /middleware, /storeなどNuxtの監視下にあるディレクトリのファイルでも、任意のprefixをつけることで無視できるようになりました。これによってTest用のファイル管理が楽になりましたね。

loading option

pageごとに loading: booleanプロパティが設定できるようになり、より柔軟にページ遷移の挙動をコントロールできるようになりました。

Store modules

Nuxtの /storeディレクトリ内に追加するファイルは全て自動でそれぞれが単一のStore modulesとして解釈されていました。ですが新たに actions.js, mutations.js, getters.js, state.jsそして index.jsというファイルを用意してやると、それらを統合して1つのmoduleとして解釈してくれるようになったようです。

自分はいつもクラシックモードでVuex storeを書いていたので気になりませんでしたが、これは嬉しい変更ですね。

Server options

nuxt.config.js内に下記のようなオプションを追加することで、サーバーのHostとPortをコード管理できるようになりました。

// nuxt.config.js
export default {
  server: {
    port: 8000,
    host: '0.0.0.0'
  }
}

また、 NUXT_HOST, NUXT_PORTという環境変数を設定することでも起動時のオプションを管理できます。

Vue config

Vueのグローバル設定を nuxt.config.js内に記述できるようになりました。 vueプロパティに記述するだけで適用できます。

Embedded content: https://jp.vuejs.org/v2/api/index.html

NUXT_ENV_

NUXT_ENV_ prefixのついた環境変数が、自動的に process.envに読み込まれます。Vue CLIでアプリケーション立ち上げ時に VUE_APP_ prefixが付いた環境変数が読み込まれるのと同じ挙動ですね。

loadingIndicator background

ページ読み込み時のインジケーターに対して、今までは nuxt.config.jsからは background-colorしか変更できませんでした。ですが今回 backgroundが変更できるよう拡張されたため、より柔軟にページ遷移のUXが作りこめるようになります。

20180922235717

watch option

nuxt.config.jsに watchオプションを設定することで、そのファイルの変更を監視し、変更時にはNuxt serverを再起動できるようになりました。

デフォルトでは nuxt.config.jsと serverMiddlewareが監視されています。

Artifact isolation

Nuxtが .nuxt/distにアーティファクトを生成する際、 .nuxt/dist/clientと .nuxt/dist/serverのそれぞれに分かれてファイルが保存されるようになりました。

Error Handler

Nuxt固有のAPIである fetchや asyncDataでエラーが発生した際も、グローバルなVueのError Handlerが呼ばれるようになりました。

ざっと目につくものをあげて見ましたが、本当に大きなアップデートですね。半年以上も待った甲斐があります。

より詳細なRelease Noteを読みたい方はこちら

Embedded content: https://github.com/nuxt/nuxt.js/releases/tag/v2.0.0

既存のNuxtアプリからのマイグレーション

既存のNuxtアプリケーションからアップグレードする一番簡単な方法は package.jsonを nuxt: "^2.0.0"に変更するだけですが、注意が必要な点が多くあるので一度公式のMigration Guideに目を通すことをオススメします。

特に $ nuxt buildで生成される生成物がserver/client間で分離されるようになったので、 .nuxt/distのコンテンツをCDN等から配信している人は、ディレクトリを .nuxt/dist/clientに変更するよう気をつけてください。 css-loaderのバージョンアップで ~/assetsが ~assetsに変わる変更なんかも...

v2.0.0での動作は保証しませんが、potato4dさんの記事も併せてどうぞ

Embedded content: https://qiita.com/potato4d/items/7b3119c88869d7622a7d

終わりに

Nuxt v2.0.0の新機能の数々、いかがだったでしょうか？

自分は以前、「NuxtにできてVue CLIに出来ないことはない」「SSRしたい時にだけNuxtを使えば良い」という趣旨の発言をしていたのですが、どうやら考えを改める時がきたようです。

Vue本家に負けない勢いで進化するNuxtの今後が楽しみですね。

それではみなさん、良いNuxtライフを！

Copyright © 2020 Shin Ando