ヌクスト
WebStorm を使用すると、ヌクスト(英語)フレームワークを使用して Vue.js アプリケーションを開発できます。WebStorm で Nuxt アプリをセットアップするには、専用の Nuxt テンプレートを使用して新規プロジェクトウィザードを使用することをお勧めします。
始める前に
コンピューターに Node.js(英語) 20 以降がインストールされていることを確認してください。
プロジェクトにローカル Node.js ランタイムが設定されていることを確認してください。設定ダイアログ（Ctrl+Alt+S）を開き、に移動してください。ノードランタイムフィールドには、プロジェクトのデフォルトの Node.js ランタイムが表示されます。詳しくはローカル Node.js インタープリターの構成を参照してください。
設定 | プラグインページのインストール済みタブで、Vue.js および JavaScript Debugger に必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。
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
関連ページ：
Node.js
Node.js は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。WebStorm は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストール...
プラグインのインストール
プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...
新規プロジェクトの作成ダイアログ
このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジ...
JavaScript ドキュメントの検索
WebStorm は、標準の JavaScript API、プロジェクトとその依存関係からのシンボル、外部ライブラリで定義されたシンボルのリファレンスを示しています。ドキュメントポップアップでシンボルのドキュメントを表示し、リンクが利用可能な場合は外部サイトのドキュメントを開くことができます。プロジェクトシンボルまたはプロジェクト依存のシンボルの場合、WebStorm は対応する JSDoc コメントからドキュメントを生成します。標準の JavaScript オブジェクトまたはメソッドの場合、We...
Vue.js
Vue.js は、ユーザーインターフェースと高度な単一ページアプリケーションを開発するためのフレームワークです。WebStorm は、個別のファイル、属性、プロパティ、メソッド、スロット名などで定義されたコンポーネントを含むコンポーネントの Vue.js 対応コード補完を使用して、HTML、CSS、JavaScript の Vue.js ビルドブロックのサポートを提供します。ビルトインデバッガーを使用すると、Vue.js のコードを WebStorm で直接デバッグすることができます。WebStor...