Nuxt

PyCharm では、 Nuxt フレームワークを使用して Vue.js アプリケーションを開発できます。 PyCharm で Nuxt アプリをセットアップするには、専用の Nuxt テンプレートを用いた新規プロジェクトウィザードの利用が推奨されます。

始める前

コンピューターに Node.js(英語) 20 以降がインストールされていることを確認してください。
プロジェクトでローカル Node.js ランタイムが設定されていることを確認してください。設定ダイアログ（Ctrl+Alt+S ）を開き、言語 & フレームワーク | JavaScript ランタイムに移動します。ノードランタイムフィールドにはプロジェクトのデフォルト Node.js ランタイムが表示されます。 Node.js インタープリターの設定の詳細を参照してください。
JavaScript and TypeScript、 JavaScript Debugger、 Vue.js の必要なプラグインが設定 | プラグインページ、タブインストール済みで有効になっていることを確認してください。詳細は、プラグインの管理を参照してください。

ようこそ画面で新規プロジェクトをクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規 Project ダイアログが開きます。
左側のペインで、 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 プロジェクトが現在のフォルダーに初期化され、PyCharm ですぐに使用できる状態になります。

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

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

PyCharm は Nuxt コンポーネントの不足しているインポートステートメントのインポートも提案します (Alt+Enter).

PyCharm は、 nuxt.config.ts 構成ファイルの適切な補完候補を提供します。

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

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

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

2.9.0 以降の Nuxt バージョンを利用していて、 @nuxt/types パッケージがインストールされていない場合、PyCharm から通知が表示され、開発依存関係としてのインストールが提案されます。通知ポップアップ内の @nuxt/types を dev 依存関係としてインストールするリンクをクリックしてください。
ポップアップを閉じても、イベントログツールウィンドウ（表示 | ツールウィンドウ | イベントログ）の @nuxt/types を dev 依存関係としてインストールするリンクをクリックして @nuxt/types をインストールできます。
または、埋め込まれたターミナル（Alt+F12 ）を開き、次のように入力します。
npm install --save-dev @nuxt/types

2026 年 6 月 1 日