IntelliJ IDEA 2026.1 Help

Nuxt

IntelliJ IDEA を使用すると、Vue.js アプリケーションで Nuxt(英語) フレームワークを使用できます。 IntelliJ IDEA で Nuxt アプリを設定する推奨方法は、 専用の Nuxt テンプレートを使った新規プロジェクトウィザードを利用することです。

始める前に

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

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

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

Nuxt 専用テンプレートからプロジェクトを作成する},{

  1. ようこそ 画面で 新規プロジェクトの作成 をクリックするか、メインメニューから ファイル | 新規 | プロジェクト を選択します。 新規 プロジェクト ダイアログが開きます。

  2. 左側のペインで、 Nuxt を選択します。

  3. 右側のペインで:

    • プロジェクト関連ファイルが保管されるフォルダーのパスを指定します。

    • Node runtime フィールドで、使用する Node.js ランタイムを指定します。 リストから構成済みのランタイムを選択するか、 追加 を選択して新しいランタイムを構成します。

    • Nuxt CLI リストから npx nuxi@latest を選択し、 作成 をクリックします。

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

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

    npm create nuxt@latest <project-name>

    または

    yarn create nuxt@latest <project-name>

    または

    pnpm create nuxt@latest <project-name>

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

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

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

Nuxt 対応のコーディング支援

IntelliJ IDEA はコード補完を提案し、すべての コア Nuxt コンポーネント(英語)の クイックドキュメントを示します。

Nuxt コンポーネントの補完とクイックドキュメント

IntelliJ IDEA は、Nuxt コンポーネントに不足している import ステートメントの追加も提案します（Alt+Enter）。

Nuxt コンポーネントのインポート用クイックフィックス

nuxt.config.ts を編集する

IntelliJ IDEA は、 nuxt.config.ts(英語) 構成ファイルの適切な補完提案を提供します。

nuxt.config.ts のコード補完

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

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

型チェック

Nuxt 4 は標準で完全な型サポートを備えています。 以前の Nuxt バージョンでは、より良いコード補完を得るには @nuxt /types パッケージが必要です。

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

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

  • 2.9.0 以降の Nuxt バージョンを使用していて、 @nuxt/types パッケージがインストールされていない場合、IntelliJ IDEA はそれについて通知し、開発依存関係としてインストールすることを提案します。 通知ポップアップの @nuxt/types を dev 依存関係としてインストールする リンクをクリックします。

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

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

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

    npm install --save-dev @nuxt/types

2026 年 3 月 30 日
Vue.jsVite