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