Nuxt3を試してみる

はじめに

Nuxt3のベータ版が公開されれたので実際にプロジェクトを作って試してみることにしました。

Nuxt3はVue3に対応したNuxtの次期バージョンで、

Typescriptの対応が進んだり、パフォーマンスがよくなったりが期待できます。

https://v3.nuxtjs.org/

出来上がりはこんな感じです。

また、Nuxt２から移行する方法はこちらの記事で紹介してます。

この記事を書いた人

@takasqr アプリケーション開発が大好きなエンジニア。Vue、Swift、Electrom などでアプリを作って公開している。AWS や Firebase などのクラウドサービスも好き。

プロジェクト作成

事前準備

  • Node.js
  • Visual Studio Code
  • Volar Extension

これらのソフトがインストールされている必要があります。

Node.js

Nuxt3でプロジェクトを作るためにはnodeのバージョンが14か16である必要があります。

nodeのバージョンを確認してみて、

node --version

必要に応じてアップデートして下さい。

Volar Extension

Volar ExtensionはVisual Studio CodeのプラグインでVue3で開発する時に便利なプラグインです。

VueLF is a Language Support plugin built specifically for Vue 3. It's based on @vue/reactivity to calculate everything on-demand, to implement native TypeScript language service level performance.

VueLFは、Vue 3専用に構築された言語サポートプラグインです。これは、@ vue / reactivityに基づいて、すべてをオンデマンドで計算し、ネイティブのTypeScript言語サービスレベルのパフォーマンスを実装します。

Vue Language Features (Volar) | Visual Studio | Marketplace

プロジェクト作成

プロジェクトを作ります。

npx nuxi init nuxt3-app

プロジェクトのディレクトリに移動します。

cd nuxt3-app

モジュールをインストールします。

npm install

ローカルで立ち上げてみます。

npm run dev

このようにサイトが立ち上がれば成功です。

サイト自体は非常に簡単に作ることができました。後、いろんなところで言われている事ですが、Viteが立ち上がるのがすごく早いのでデバッグ時のストレスが減りそうです。

おまけ

ちなみに、ローカルで立ち上げた時にhttp://localhost:3000/にブラウザでアクセスすると一瞬サイトが表示されるのですが、その後すぐに真っ白になってしまいました。

コンソールを確認すると、

[Vue warn]: Hydration node mismatch:
- Client vnode: App 
- Server rendered DOM: 
<div> <empty string> 
  at <NuxtRoot>

Hydration completed but contains mismatches.

と警告とエラーが出ていました。

ですが、IPアドレス(http://192.168.xxx.xxx:3000/)でアクセスするとちゃんと表示されました。

Nuxt3は現在Beta版なので、とりあえずこのエラーは深追いするのはやめました。きっとリリースされる時には出なくなるはずです。