ヌクスト
PhpStorm を使用すると、 Nuxt フレームワークで Vue.js アプリケーションを開発できます。 PhpStorm で Nuxt アプリを設定するおすすめの方法は、 専用の Nuxt テンプレートを使って新規プロジェクトウィザードを利用することです。
始める前に
Node.js バージョン 20 以降をダウンロードしてインストールします。
プロジェクトにローカル Node.js ランタイムが構成されていることを確認してください。 設定 ダイアログ（Ctrl+Alt+S ）を開き、 へ進みます。 ノードランタイム フィールドには、デフォルトのプロジェクト Node.js ランタイムが表示されます。 Node.js インタープリターの設定の詳細を参照してください。
JavaScript and TypeScript、 JavaScript デバッガー、 Vue.js の必要なプラグインが 設定 | プラグイン ページ、タブ インストール済み で有効化されていることを確認してください。 詳細は、 プラグインの管理を参照してください。
Nuxt 固有のテンプレートからプロジェクトを作成する
ウェルカム 画面で 新規プロジェクト をクリックするか、メインメニューから を選択します。 新規 プロジェクト ダイアログが開きます。
左側のペインで、 ヌクスト を選択します。
右側のペインで：
プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
ノードランタイム フィールドで使用する Node.js ランタイムを指定します。 リストから設定済みのランタイムを選択するか、 追加 を選択して新しいランタイムを設定してください。
Nuxt CLI リストから npx nuxi@ 最新 を選択し、 作成 をクリックします。
コマンドラインからプロジェクトを作成する
埋め込み ターミナル （Alt+F12 ）を開いて、次のように入力します。
npm create nuxt@latest <project-name>または
yarn create nuxt@latest <project-name>または
pnpm create nuxt@latest <project-name>ウィザードはあなたにいくつかの質問をします。 質問に回答すると、Nuxt プロジェクトが現在のフォルダーで初期化され、PhpStorm で利用可能になります。
Nuxt 公式サイト(英語)の詳細を参照してください。
Nuxt 対応コーディング支援
PhpStorm はコード補完を提案し、すべての コア Nuxt コンポーネントに対して クイックドキュメントを表示します。
PhpStorm は Nuxt コンポーネントの不足しているインポートステートメントのインポートも提案します (Alt+Enter)。
nuxt.config.ts を編集する
PhpStorm は nuxt.config.ts 構成ファイルに対して適切な補完候補を提供します。
ホバーすると、ファイルで使用されている Nuxt オプションの型情報を表示するドキュメントのポップアップも表示されます。
型チェック
Nuxt 4 は完全な型付けが標準装備されています。 以前のバージョンの Nuxt では、より優れたコード補完を取得するには @nuxt /types パッケージが必要です。
Nuxt 公式サイト(英語)の詳細を参照してください。
@nuxt/types パッケージをインストールする
2.9.0 以降の Nuxt バージョンを利用していて
@nuxt/typesパッケージがインストールされていない場合、PhpStorm が通知し、開発依存関係としてのインストールを提案します。 通知ポップアップ内の @nuxt/types を dev 依存関係としてインストールする リンクをクリックしてください。
ポップアップを閉じても、 イベントログ ツールウィンドウ（ ）の @nuxt/types を dev 依存関係としてインストールする リンクをクリックして
@nuxt/typesをインストールできます。または、埋め込まれた ターミナル （Alt+F12 ）を開き、次のように入力します。
npm install --save-dev @nuxt/types