今回達成すること
ブラウザにNuxt3を立ち上げます。
Nuxt3 インストール前の事前準備
1. Node.js
Node.jsの最新のLTS（安定）バージョンが必要です。
2022年1月現在では下記バージョンが必須です。
"^14.16.0 || ^16.11.0 || ^17.0.0".
ローカルのNode.jsのバージョンを確認の上、次のステップに進んでください。
2. エディタ
Nuxt3にはVSCodeが推奨されています。
3. Vue Language Features (Volar)（VSCode 拡張機能）のインストール
VSCodeにVue Language Features (Volar) をインストールします。
Vue Language Features (Volar)は、Vue3とTypeScriptの開発環境をサポートするVSCodeの拡張機能です。
その他にもシンタックスハイライトや、 HTMLタグの名前変更を自動化してくれる機能が備わっています。
参考: vitejs/vite - GitHub, Tips · johnsoncodehk/volar - GitHub
Nuxt2系ではエラーが発生するのでVolarはまだ有効にしないでください。
インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。ts(7026)
Nuxt3のインストール
1. 作業ディレクトリの作成
作業ディレクトリを作成し、移動します。
% mkdir nuxt3 && cd $_
2. Nuxt3Betaのインストール
npxを使用し、Nuxt3のインストールコマンドを実行します。
% npx nuxi init <app name>
# 筆者の場合
% npx nuxi init test-nuxt-app
nuxi... Nuxt3のスタブ（テスト用のまだ完成していない機能の代わりとなる部品）パッケージのインストールコマンド。
npxコマンドが使用できない場合
npmコマンドでグローバル（ローカルPC）にインストールできます。
% npm install -g npx
3. VSCodeでNuxtプロジェクトを開く
VSCodeのcodeコマンドでターミナルからプロジェクトを開きます。
% code <app name>
codeコマンドが使用できない場合
- VSCodeの検索バーを開く =>
Cmd + Shift + P - 検索バーに
shell commandと入力 - 「PATH内に'code'コマンドをインストールします」をクリック
4. 依存関係のインストール
VSCodeのターミナルから、Nuxt3の依存関係（パッケージ）をインストールします。
% yarn install
...
success Saved lockfile.
✨ Done in 23.07s.
Nuxt3 × VSCodeセットアップ
VSCode上でCmd + Shift + Xを実行し、インストール済みの拡張機能を開きます。
1. Vue Language Features (Volar)を有効にする
インストールしたVue Language Featuresは、有効（ワークスペース）にします。
2. Veturを無効にする
Volarとの競合を避けるため、Veturを無効にする必要があります。
拡張機能のVeturが有効になっている場合は無効（ワークスペース）にしてください。
3. テイクオーバーモードを有効にする
Volarモードには問題があり、VSCodeのテイクオーバーモードを有効にする必要があります。
テイクオーバーモードはどのようにVolarモードの問題を解決しますか？
テイクオーバーモードは、VSCode組み込みのTypeScript拡張機能を使用せず、Vue + TS言語サポートを提供するためにVue言語サーバーのみを使用します。したがって、2つの言語サービスインスタンスしかありません。
このアプローチにはハッキングはありません。拡張機能が更新されるたびに、TSプラグインのvscodeをリロードする必要がなくなりました。
拡張機能の検索バーから、「@builtin TypeScript and JavaScript Language Features」を検索します。
出力される「TypeScript and JavaScript Language Features」を無効（ワークスペース）にします。
以上でNuxt3とVSCodeの環境は整いました。
ブラウザでNuxt3を立ち上げる
VSCodeのターミナルから、Nuxt3サーバー起動コマンドにopenオプションを付けて実行します。
% yarn dev -o
localhost:3000にNuxt3が立ち上がりました。
完。
補足: テイクオーバーモードの制限
テイクオーバーモードの制限は何ですか？
Vue言語サーバーはすべての組み込みTS拡張機能を提供しようとしますが、いくつかの機能が遅れたり、欠落したり、バグがあったりすることが常にあります。
Volarには、monorepoサポートに関する既知のパフォーマンスの問題があります。TSプロジェクトがmonorepoの場合、。tsでの言語サポートは以前より遅くなる可能性があります。*
TS拡張機能が無効になっていると、VolarはTS拡張機能の設定を取得できないため、VSCodeユーザーのTypeSciprt設定が機能しません。ただし、worksapceTypeSciprt設定は引き続き機能します。
上記のように完全な設定ではありませんので、TypeScript and JavaScript Language Featuresを有効に戻すことも視野に入れてください。
その場合の代替え案として、TypeScript Vue Plugin (Volar) をダウンロードする方法も紹介されています。