# Nuxt

> For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt).

> **TL;DR**
> 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。
>
>
>
> 所需插件  :
>
>
>
> `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。
>
>
>
> `Vue.js`  -  在   设置 | 插件   页面上安装插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。

借助 IntelliJ IDEA，您可以使用 [Nuxt](https://nuxt.com/) 框架开发您的 Vue.js 应用。 在 IntelliJ IDEA 中设置 Nuxt 应用的推荐方式是 [使用新建项目向导并选择专用 Nuxt 模板](#ws_vue_nuxt_create_app_new_project_wizard)。

## 开始之前

Procedure:

1. 下载并安装 [Node.js](http://nodejs.org/#download)，版本 20 或更高版本。

2. 请确保已在您的项目中配置本地 Node.js 运行时：打开   设置   对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），然后转到  `语言与框架 | JavaScript 运行时` 。   Node.js 运行时   字段显示项目默认的 Node.js 运行时。 详细信息请参阅 [配置本地 Node.js 解释器](developing-node-js-applications.html#ws_node_configure_local_node_interpreter)。

3. 确保  JavaScript 和 TypeScript 、  JavaScript 调试器  和  Vue.js  所需插件已在   设置 | 插件   页面上启用。 如需更多信息，请参阅 [管理插件](managing-plugins.html)。

## 使用 Nuxt 专用模板创建项目

Procedure:

1. 点击   新建项目   屏幕上的   欢迎   或从主菜单中选择  `文件 | 新建 | 项目` 。 将打开 [新建 项目 对话框](null)。

2. 在左侧窗格中，选择   Nuxt  。

3. 在右侧窗格中：

* 指定将存储项目相关文件的文件夹路径。

* 在 Node.js 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择一个已配置的运行时，或选择 添加 以配置新的运行时。

* 在 Nuxt CLI 列表中，选择 npx nuxi@latest ，然后点击 创建 。

## 从命令行创建项目

Procedure:

1. 打开你的命令行 shell 或嵌入式   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))），然后输入：

`npm create nuxt@latest <project-name>`

或

`yarn create nuxt@latest <project-name>`

或

`pnpm create nuxt@latest <project-name>`

2. 向导会问您一些问题。 在您回答完这些问题后，会在当前文件夹中初始化一个 Nuxt 项目，您可以在 IntelliJ IDEA 中使用它。

![Nuxt 项目向导](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_nuxt_create_app_cli_steps_wizard.png)

请在 [Nuxt 官方网站](https://nuxt.com/docs/4.x/getting-started/installation) 了解更多信息。

## Nuxt 感知的编码辅助

IntelliJ IDEA 提供代码补全，并显示 [快速文档](viewing-javascript-reference.html)，适用于所有 [Nuxt 核心组件](https://nuxt.com/docs/4.x/api/kit/components#addcomponent)。

![针对 Nuxt 组件的补全和快速文档](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_nuxt_component_completion_quick_doc.png)

IntelliJ IDEA 还会建议为 Nuxt 组件导入缺失的 import 语句 ( `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Alt+Enter` (NetBeans), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)).

![用于导入 Nuxt 组件的快速修复](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_nuxt_component_import.png)

## 编辑 nuxt.config.ts

IntelliJ IDEA 为 [nuxt.config.ts](https://nuxt.com/docs/4.x/getting-started/configuration) 配置文件提供正确的补全建议。

![在 nuxt.config.ts 中的代码补全](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_nuxt_config_completion.png)

将鼠标悬停时，您还会看到文档弹出窗口，显示文件中使用的 Nuxt 选项的类型信息。

![在 nuxt.config.ts 中的快速文档弹窗](https://resources.jetbrains.com/help/img/idea/2026.3/ws_vue_nuxt_config_doc_popup.png)

## 类型检查

Nuxt 4 开箱即具备完整的类型支持。 对于较早的 Nuxt 版本，您需要安装  `@nuxt /types`  软件包以获得更好的代码补全。

请在 [Nuxt 官方网站](https://nuxt.com/docs/4.x/guide/concepts/typescript) 了解更多信息。

Procedure: 安装 @nuxt/types 包

* 如果您使用的是 Nuxt 2.9.0 及更高版本且未安装  `@nuxt/types`  软件包，IntelliJ IDEA 会就此向您发出通知，并建议将其作为开发依赖进行安装。 点击通知弹出窗口中的   将 @nuxt/types 安装为开发依赖项  链接。

![关于缺少 @nuxt/types 的通知](https://resources.jetbrains.com/help/img/idea/2026.3/ws_nuxt_warning_about_types.png)

如果关闭弹出窗口，仍可通过点击   事件日志   工具窗口（  `查看 | 工具窗口 | 事件日志` ）中的   将 @nuxt/types 安装为开发依赖项   链接来安装  `@nuxt/types` 。

* 或者，打开你的命令行 shell 或嵌入的   终端  （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))），然后输入：

`npm install --save-dev @nuxt/types`