JetBrains Rider 2026.1 Help

Nuxt

JetBrains Rider を使用すると、 Nuxt フレームワークを使って Vue.js アプリケーションを開発できます。 JetBrains Rider で Nuxt アプリを設定するおすすめの方法は、 専用の Nuxt テンプレートを使って新規プロジェクトウィザードを利用することです。

始める前に

  1. Node.js バージョン 20 以降をダウンロードしてインストールします。

  2. プロジェクトにローカル Node.js ランタイムが設定されていることを確認してください： 設定 ダイアログ（Ctrl+Alt+S ）を開き、 言語& フレームワーク | JavaScript ランタイム に進んでください。 ノードランタイム フィールドにはデフォルトのプロジェクト Node.js ランタイムが表示されます。 Node.js インタープリターの設定の詳細を参照してください。

  3. JavaScript and TypeScript、 JavaScript デバッガー、 Vue.js の必須プラグインが 設定 | プラグイン ページ、タブ インストール済み で有効化されていることを確認してください。 詳細については、 プラグインの管理を参照してください。

コマンドラインからプロジェクトを作成する

  1. 埋め込み ターミナル （Alt+F12 ）を開いて、次のように入力します。

    npm create nuxt@latest <project-name>

    または

    yarn create nuxt@latest <project-name>

    または

    pnpm create nuxt@latest <project-name>

  2. ウィザードはあなたにいくつかの質問をします。 それらに回答すると、Nuxt プロジェクトが現在のフォルダーに初期化され、JetBrains Rider ですぐに使用できます。

    Nuxt プロジェクトウィザード

Nuxt 公式サイト(英語)の詳細を参照してください。

Nuxt 対応コーディング支援

JetBrains Rider はコード補完を提案し、すべての コア Nuxt コンポーネントの クイックドキュメントを表示します。

Nuxt コンポーネントの完成と簡単なドキュメント

JetBrains Rider は、Nuxt コンポーネントの不足しているインポートステートメントのインポートも提案します（Alt+Enter）。

Nuxt コンポーネントをインポートするためのクイックフィックス

nuxt.config.ts を編集する

JetBrains Rider は nuxt.config.ts 構成ファイルに対して適切な補完候補を提案します。

nuxt.config.ts のコード補完

カーソルを合わせると、ファイルで使われている Nuxt オプションの型情報が表示されたドキュメントポップアップも見られます。

nuxt.config.ts のクイックドキュメントポップアップ

型チェック

Nuxt 4 は完全な型付けが標準装備されています。 以前のバージョンの Nuxt では、より優れたコード補完を取得するには @nuxt /types パッケージが必要です。

Nuxt 公式サイト(英語)の詳細を参照してください。

@nuxt/types パッケージをインストールする

  • 2.9.0 以降の Nuxt バージョンを使用していて、 @nuxt/types パッケージがインストールされていない場合、JetBrains Rider から通知が表示され、開発依存関係としてのインストールが提案されます。 通知ポップアップ内の @nuxt/types を dev 依存関係としてインストールする リンクをクリックしてください。

    欠落している @nuxt/ タイプに関する通知

    ポップアップを閉じても、 イベントログ ツールウィンドウ（表示 | ツールウィンドウ | イベントログ ）の @nuxt/types を dev 依存関係としてインストールする リンクをクリックして @nuxt/types をインストールできます。

  • または、埋め込まれた ターミナル （Alt+F12 ）を開き、次のように入力します。

    npm install --save-dev @nuxt/types

2026 年 6 月 12 日
Vue.jsVite