PyCharm 2025.3 Help

Nuxt

With PyCharm, you can use the Nuxt framework to develop your Vue.js applications. The recommended way to set up a Nuxt app in PyCharm is to use the New Project wizard with a dedicated Nuxt template.

Before you start

  1. Make sure you have Node.js 20 or later on your computer.

  2. Make sure a local Node.js runtime is configured in your project: open the Settings dialog (Ctrl+Alt+S) and go to Languages & Frameworks | JavaScript Runtime. The Node runtime field shows the default project Node.js runtime. Learn more from Configuring a local Node.js interpreter.

  3. Make sure the JavaScript and TypeScript, JavaScript Debugger, and Vue.js required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to Managing plugins.

Create a project from a Nuxt-specific template

  1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

  2. In the left-hand pane, choose Nuxt.

  3. In the right-hand pane:

    • Specify the path to the folder where the project-related files will be stored.

    • In the Node runtime field, specify the Node.js runtime to use. Select a configured runtime from the list or choose Add to configure a new one.

    • From the Nuxt CLI list, select npx nuxi@latest and click Create.

Create a project from the command line

  1. Open the embedded Terminal (Alt+F12) and type:

    npm create nuxt@latest <project-name>

    or

    yarn create nuxt@latest <project-name>

    or

    pnpm create nuxt@latest <project-name>

  2. The wizard asks you some questions. After you answer them, a Nuxt project is initialized in the current folder and is ready to use in PyCharm.

    Nuxt project wizard

Learn more from the Nuxt official website.

Nuxt-aware coding assistance

PyCharm suggests code completion and shows quick documentation for all core Nuxt components.

Completion and quick doc for Nuxt components

PyCharm also suggests importing missing import statements for Nuxt components (Alt+Enter.

Quick fix to import a Nuxt component

Edit nuxt.config.ts

PyCharm provides proper completion suggestions for the nuxt.config.ts configuration file.

Code completion in nuxt.config.ts

On hover, you’ll also see the Documentation popup showing the type information for the Nuxt options used in the file.

Quick documentation popup in nuxt.config.ts

Type checking

Nuxt 4 is fully typed of the box. With earlier Nuxt versions, you need the @nuxt /types package to get better code completion.

Learn more from the Nuxt official website.

Install the @nuxt/types package

  • If you’re using a Nuxt version from 2.9.0 onwards and don’t have the @nuxt/types package installed, PyCharm notifies you about it and suggests installing it as a development dependency. Click the Install @nuxt/types as dev dependency link in the notification popup.

    Notification about missing @nuxt/types

    If you close the popup, you can still install @nuxt/types by clicking the Install @nuxt/types as dev dependency link in the Event Log tool window (View | Tool windows | Event Log).

  • Alternatively, open the embedded Terminal (Alt+F12) and type:

    npm install --save-dev @nuxt/types

29 October 2025
Vue.jsVite