Nuxt3を触ってみたら本気を感じた

Nuxt3がベータになりましたね。
中身は色々変わったことが書かれているので、いちユーザーとして表面上何がどう変わったのかを見ていきたいと思います。

プロジェクト作成

新規プロジェクトは``nuxi`というNuxt用の新しく作られたCLIを使います。
たった3コマンドでプロジェクトのテンプレートがもう使えちゃいます。

$ npx nuxi init nuxt3
$ cd nuxt3
$ yarn install

この状態でnode modulesのインストールが完了するので、開発用サーバーを起動しましょう。

$ yarn dev -o

-oオプション渡していたら以下のページが自動で開くはず。
開かなくても http://localhost:3000/ でいけますね。

ディレクトリ見てみる

この状態のディレクトリ見てみるとかなりあっさりです（node周りは省略）。

/.nuxt         - 生成されたVueのアプリがここに作られる。基本触らない。
app.vue        - Nuxtのメイン（ルート）コンポーネント。
nuxt.config.ts - Nuxtの設定周りを記述するファイル。TSになった！
tsconfig.json  - /.nuxt配下にtsconfig.jsonを生成するために必要。良い感じになってるので基本はこのままで良さそう。

Nuxt2は/pagesとか/componentsとかディレクトリすべて生成されて中にREADME.mdが格納されていたんですが、かなりミニマルな作りになったみたいですね。自分でドキュメント読みながら追加していくのが良さそう。個人的にはこっちの方が使う側もドキュメント読みながら自分で取捨選択していくようになると思うので良いんじゃないかと思いました。

ドキュメント見てみる

あとはドキュメント自体が読みやすくなりましたね。
ConceptsとDocumentsがキッチリ分かれるようになってます。

ディレクトリのアイコンが分かりやすく、アプリをデプロイする為のドキュメントもキッチリ揃ってます。
かなりDeveoloper's Experienceが考えられたカイゼンが見えてイイですね！
Nuxtはディレクトリ構造がカッチリ決まってることが秩序をもたらしてくれるんですけど、
それぞれのディレクトリでどういう機能があるのかがディレクトリの名前更改も相まって理解しやすい。

pagesとcomponentsにコンポーネント作ってみる

まずはpagesディレクトリを作りindex.vueを作ってみます。

/pages/index.vue

<template>
  <div>
    <h1>INDEX</h1>
  </div>
</template>

このファイルを生成すると、開発サーバーが404になりました。理由はpagesディレクトリを検出時に.nuxt配下のアプリ生成がうまくいっていないか、pagesディレクトリを使うとvue-routerを使うようになるのでその切替がうまくいかないんだと思います。いったん、app.vue自体の修正も必要になるので、先に<NuxtWelcome/>コンポーネントではなく<NuxtPage/>コンポーネントに差し替えます。

app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

これで$ yarn dev -oし直すと、ちゃんとページが表示されました。

次はここに子コンポーネントを追加していきます。
componentsディレクトリを作り中にTitleComponent.vueを作ります。

/components/TitleComponent.vue

<template>
  <h2>COMPONENT</h2>
</template>

そして、このコンポーネントを/pages/index.vue側で利用してみます。

/pages/index.vue

<template>
  <div>
    <h1>INDEX</h1>
    <TitleComponent />
  </div>
</template>

ドキュメント読むとなんとcomponentsディレクトリ配下のコンポーネントはすべて自動的にインポートされるらしいです。Nuxt2ではここは手動でインポートが必要でしたね。ここまでやってくれちゃうと最初にNuxt3触ってからVue触るとわけわからなくなりそうな気も。基本を理解しているなら裏で色々やってくれるのは早くてありがたいですけどね。

ここでまた開発サーバーのページを開くとエラーが出ます。どうやらNuxtの機能に関わるディレクトリの変更はホットリロードできないみたいですね。おとなしく$yarn dev -oし直すと、コンポーネントが表示されました。

感想

Nuxtというフレームワーク単体ではなく、CLI、ドキュメント、TypeScriptの導入など、総合的にDeveloper's Experienceのカイゼンを意識したエコシステムを目指し仕上げてきたなと言う印象を受けました。ここは個人的に素晴らしいポイントだと思っていて、そういうエコシステムにこそ健全なコミュニティが定着し、そのコミュニティがよりエコシステムを発展させていく良いライフサイクルが生まれることに繋がるはず。

とくにSSRのアプリのデプロイなんかは最初よくわからない人多いと思うんですが、それもメジャーなクラウドやホスティングサイトごとに説明が用意されてるのって親切ですよね。Vue3を少し触ってアプリ作るってなったらNuxt3でストレス少なく開発していくみたいな流れが良さそうです。