# Vue.js

> **TL;DR**
> Available only in IntelliJ IDEA with the Ultimate subscription: [download](https://www.jetbrains.com.cn/en-us/idea/download/) to try or [explore the features](https://www.jetbrains.com.cn/en-us/products/compare/?product=idea&product=idea-ult).
>
>
>
>
>
> Required plugins:
>
>
>
> `JavaScript and TypeScript` -    the plugin is bundled with IntelliJ IDEA and enabled by default.
>
>
>
> `Vue.js` -    install the plugin on the Settings | Plugins page, tab Marketplace.     The plugin is available only in IntelliJ IDEA with the Ultimate subscription.

[Vue.js](https://vuejs.org/) is a framework for developing user interfaces and advanced single-page applications. IntelliJ IDEA provides support for the Vue.js building blocks of HTML, CSS, and JavaScript with Vue.js-aware [code completion](#ws_vue_code_completion) for components, including components defined in separate files, attributes, properties, methods, slot names, and more.

With the built-in debugger, you can debug your Vue.js code right in IntelliJ IDEA, which can automatically generate the necessary run/debug configurations you need: an [npm configuration](run-debug-configuration-npm.html) that launches the development server and starts your application in the development mode and a [JavaScript Debug](run-debug-configuration-javascript-debug.html) configuration that launches a debugging session.

## Before you start

Procedure:

1. Download and install [Node.js](http://nodejs.org/#download).

2. Make sure a local Node.js runtime is configured in your project:   open the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))) 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](developing-node-js-applications.html#ws_node_configure_local_node_interpreter).

3. Make sure the  JavaScript and TypeScript plugin is enabled in the settings.  Press `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`.  Click the Installed tab. In the search field, type JavaScript and TypeScript. For more information about plugins, refer to [Managing plugins](managing-plugins.html).

4. Install and enable the Vue.js plugin on the Settings | Plugins page, tab Marketplace, as described in [Installing plugins from
JetBrains Marketplace](managing-plugins.html#install_plugin_from_repo).     The plugin is available only in IntelliJ IDEA with the Ultimate subscription.

## Create a new Vue.js application

The recommended way to create a new Vue.js app is the [create-vue](https://github.com/vuejs/create-vue) official Vue project scaffolding tool, which IntelliJ IDEA downloads and runs for you using [npx](https://www.npmjs.com/package/npx).

You can still use [Vue CLI](https://cli.vuejs.org/), if you choose this option IntelliJ IDEA also downloads and runs it with `npx`.

Of course, you can download any of these tools yourself or create an empty IntelliJ IDEA project and bootstrap it with Vue.js and other tools, such as [Vite](https://vitejs.dev/), [babel](https://babeljs.io/),  [webpack](https://webpack.js.org/),  [ESLint](http://eslint.org/),  etc.

Procedure:

1. Select `File | New | Project` from the main menu or click the New Project button on the Welcome screen.

2. In the New Project dialog, select Vue.js in the left-hand pane.

3. In the right-hand pane, specify the project name and the folder to create it in.  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 Vue CLI list, select npx --package @vue/cli vue.

Alternatively, for npm version 5.1 and earlier, install the `@vue/cli` package yourself by running `npm install --g @vue/cli` in the Terminal `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)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)). When creating an application, select the folder where the `@vue/cli` package is stored.

To bootstrap your application with [babel](https://babeljs.io/docs/en/) and [ESLint](https://eslint.org/), select the Use the default project setup checkbox.

4. When you click Create, IntelliJ IDEA generates a Vue.js-specific project with all the required configuration files and downloads the necessary dependencies. You can view the progress in the Run tool window.

Procedure: Create an empty IntelliJ IDEA project

1. Select `File | New | Project` from the main menu or click the New Project button on the Welcome screen.

2. In the New Project dialog, select JavaScript in the left-hand pane.

3. In the right-hand pane, choose JavaScript and click Next.

4. On the second page of the wizard, specify the project name and the folder to create it in.

5. When you click Create, IntelliJ IDEA creates and opens an empty project.

Procedure: Install Vue.js in an empty project

1. Open the empty project where you will use Vue.js.

2. In your command-line shell or in the embedded Terminal (`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)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) , type:

`npm install vue`

> **Tip:**
> Alternatively, follow the [Vue.js installation instructions](https://vuejs.org/v2/guide/installation.html#NPM).

## Start with an existing Vue.js application

To continue developing an existing Vue.js application, open it in IntelliJ IDEA and download the required dependencies.

Procedure: Open the application sources that are already on your machine

* Click Open or Import on the Welcome screen or select `File | Open`   from the main menu. In the dialog that opens, select the folder where your sources are stored.

Procedure: Check out the application sources from your version control

1. Click Clone Repository on the Welcome screen.

Alternatively, select  `File | New | Project from Version Control…` or  `Git | Clone…` or `VCS | Get from Version Control` from the main menu.

Instead of Git in the main menu, you may see any other Version Control System that is associated with your project. For example, Mercurial or Perforce.

2. In the dialog that opens, select your version control system from the list and specify the repository to check out the application sources from. For more information, refer to [Check out a
project (clone)](manage-projects-hosted-on-github.html#clone-from-GitHub).

Procedure: Download the dependencies

* Click Run 'npm install' or Run 'yarn install' in the popup:

![Open an application and download the dependencies](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_npm_yarn_package_run_npm_install.png)

You can use [npm](https://docs.npmjs.com/), [Yarn 1](https://classic.yarnpkg.com/lang/en/), or [Yarn 2](https://yarnpkg.com/), refer to [npm and Yarn](installing-and-removing-external-software-using-node-package-manager.html) for details.

* Alternatively, select Run 'npm install' or Run 'yarn install' from the context menu of `package.json` in the editor or in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) .

### Project security

When you open a project that was created outside IntelliJ IDEA and was imported into it, IntelliJ IDEA displays a dialog where you can decide how to handle this project with unfamiliar source code.

Select one of the following options:

* Preview in Safe Mode: in this case, IntelliJ IDEA opens the project in a preview mode. It means that you can browse the project's sources but you cannot run tasks and script or run/debug your project. IntelliJ IDEA displays a notification on top of the editor area, and you can click the Trust project… link and load your project at any time.

* Trust Project: in this case, IntelliJ IDEA opens and loads a project. That means the project is initialized, project's plugins are resolved, dependencies are added, and all IntelliJ IDEA features are available.

* Don't Open: in this case, IntelliJ IDEA doesn't open the project.

Learn more from [Project security](project-security.html).

> **Tip:**
> Projects created from the Welcome screen or via `File | New | Project` as described in  are automatically considered trusted.

## Write and edit your code

In `.vue` files, IntelliJ IDEA recognizes `script`, `style`, and `template` blocks. You can use JavaScript and TypeScript inside `script` tags, Style Sheet languages inside `style` tags, and HTML and Pug inside `template` tags.

When you use TypeScript inside a `script` tag, IntelliJ IDEA invokes the [TypeScript language service](https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API) for type checking and shows detected errors in the Errors and Compile errors tabs of the TypeScript tool window.  Alternatively, you can use TsLint as described in [Linting TypeScript in Vue.js components using TSLint](#ws_vue_linting)

### Vue.js components

IntelliJ IDEA recognizes the `.vue` file type and provides a dedicated .vue file template for Vue.js components.

Procedure: Create a Vue.js component

1. In the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) , select the parent folder for the new component, and then choose Vue Component from the list.

2. In the New Vue Component popup, enter the name of the component file and select the component type: Composition API or Options API.

![Create a Vue.js component](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_vue_file_template.png)

You can also extract a new Vue.js component from an existing one without any copying and pasting but using a dedicated intention action or refactoring. All the data and methods used in the newly extracted template stay in the parent component. IntelliJ IDEA passes them to the new component with properties and copies the related styles.

Procedure: Extract components

1. Select the template fragment to extract and invoke component extraction:

* To use the intention action, press `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` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and then choose Extract Vue Component from the list.

* To use the refactoring, choose `Refactor | Extract | Extract Vue Component` from the main menu or from the context menu of the selection.

2. Type the name of the new component. If this name is already used or invalid, IntelliJ IDEA shows a warning. Otherwise, a new single-file component is created and imported into the parent component.

![Extract a Vue component](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_extract_vue_component.png)

> **Note:**
> The Extract Vue Component refactoring works only in-place, so make sure the In the editor refactoring option is selected on  the Editor | Code Editing settings page `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) .

### Code completion

Procedure: Complete code inside script, style, and template blocks

* By default, IntelliJ IDEA provides code completion for ECMAScript 6 inside `script` blocks and for CSS inside `style` blocks.

![Vue.js: completion for ES6 inside <script> tag](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_js_completion_for_es6_inside_script.png)

* Inside the `template` tag, code completion `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS)) and navigation to the definition `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `Ctrl+B` (NetBeans), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `F3` (Eclipse), `F3` (Eclipse (macOS)) for Vue.js components and attributes is available.

![Vue.js: completion inside template tags](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_completion_inside_templates.animated.gif)

Procedure: Complete Vue.js properties and methods

* IntelliJ IDEA also suggests completion for Vue.js properties, properties in the `data` object, computed properties, and methods.

![Vue.js: completion for interpolations](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_completion_methods.animated.gif)

Procedure: Complete slot names

* IntelliJ IDEA provides completion for the names of [slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) from library components and from components defined in your project.

If your project contains a component with named slots, IntelliJ IDEA shows suggestions for these names in the `v-slot` directive of a `template` tag.

If you’re using [Vuetify](https://vuetifyjs.com/en/), [Quasar](https://quasar.dev/), or [BootstrapVue](https://bootstrap-vue.js.org/), code completion for slot names is also available.

Procedure: Complete components defined in separate files

* If a [component is defined in several files](https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns), IntelliJ IDEA recognizes the links between the parts of the component and provides proper code completion for properties, data, and methods.

For example, if the parts of your component are defined in separate JavaScript and stylesheet files that are linked in the `vue` file through the `src` attribute, properties defined in JavaScript are properly completed in the template as methods do.

* Templates inside template literals in the `template` property of a component get completion just as if this code were inside a `template` tag.

Completion is also available if a template is defined in a separate HTML file and then linked to the `template` property.

Procedure: Complete code inside Vue.js injections

Within Vue.js injections inside HTML files, IntelliJ IDEA recognizes Vue.js syntax and highlights your code accordingly. You can also get completion for symbols from Vue.js libraries that are linked from a CDN in an HTML file without adding these libraries to your project dependencies.

![Download libraries linked via CDN](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_vue_completion_download_cdn_lib.png)

1. Open the HTML file with a CDN link to an external Vue.js library. IntelliJ IDEA highlights the link.

2. To enable completion for the library, press `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` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) on the link and select `Download library` from the list. Alternatively, hover over the link and click Download library.

The library is added to the list of JavaScript libraries on the `Settings | Languages and Frameworks | JavaScript | Libraries` page. For more information, refer to [Configuring a library added via a CDN
link](configuring-javascript-libraries.html#ws_js_external_library_downloaded_from_CDN).

### Vuex store

IntelliJ IDEA resolves references to the [Vuex
store](https://vuex.vuejs.org/guide/) and provides highlighting and completion for them.

![Code completion for Vuex store](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_vue_nuxt_vuex_completion.png)

### Assets

IntelliJ IDEA resolves all references to [assets](https://nuxt.com/docs/4.x/getting-started/assets) stored in the `static` folder in the `<img src='/logo.png/>` format.

### Parameter hints

Parameter hints show the names of parameters in methods and functions to make your code easier to read.

Procedure: Configure parameter hints

1. Open the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))) and go to `Editor | Inlay Hints`.

2. Expand Vue under Parameter names.

3. Specify the context in which you want parameter hints shown by selecting the corresponding checkboxes.

The preview shows how the changes you make in the settings affect the code appearance.

4. For some methods and functions, IntelliJ IDEA does not show parameter hints in any context. Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.

5. To hide parameter hints for any value type in any context, clear the Vue template checkbox under Parameter names.

### Navigate with component usages

Use inlay hints to jump from a component to its usages. If a component is used more than once, IntelliJ IDEA shows a list of detected usages. Select the relevant usage to jump to it.

![Show Component Usages](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_inlay_hints_code_vision_component_usages.animated.gif)

Show component usages hints are displayed by default. To turn them off,  press `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and select Editor | Inlay Hints . Then clear the Component usages checkbox under Code vision.

Alternatively, right-click a Show component usages hint in the editor and select Hide 'Code Vision: Component usages' Inlay Hints.

![Turn off Component usages in the editor](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_vue_component_usages_turn_off.png)

### Vue.js live templates

With IntelliJ IDEA, you can use a collection of Live templates for Vue.js adapted from the [collection created by Sarah Drasner](https://github.com/sdras/vue-vscode-snippets).

Procedure:

1. Type the abbreviation of the template to use or press `Ctrl+J` (Windows), `⌘ J` (macOS), `⌘ J` (IntelliJ IDEA Classic (macOS)), `⌘ J` (macOS System Shortcuts), `Ctrl+J` (XWin), `Ctrl+J` (GNOME), `Ctrl+J` (KDE), `Ctrl+J` (Emacs), `Ctrl+J` (Sublime Text), `Ctrl+J` (Sublime Text (macOS)), `Ctrl+J` (NetBeans), `Ctrl+K, X` (Visual Studio), `⌘ E, L` (Visual Studio (macOS)), `Ctrl+Alt+Shift+J` (Eclipse), `Ctrl+J` (Eclipse (macOS)) and select it from the list of available templates.

2. To expand the template, press `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (NetBeans), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (Eclipse), `⇥` (Eclipse (macOS)).

3. To move from one variable to another inside the template, press `Tab` (Windows), `⇥` (macOS), `⇥` (IntelliJ IDEA Classic (macOS)), `⇥` (macOS System Shortcuts), `Tab` (XWin), `Tab` (GNOME), `Tab` (KDE), `Tab` (Emacs), `Tab` (Sublime Text), `⇥` (Sublime Text (macOS)), `Tab` (NetBeans), `Tab` (Visual Studio), `⇥` (Visual Studio (macOS)), `Tab` (Eclipse), `⇥` (Eclipse (macOS)) again.

![Vue.js code snippet (live template)](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_vue_snippet.animated.gif)

### TypeScript in Vue.js applications

If your Vue.js project is written in TypeScript, you need to choose the service to get coding assistance for `.ts` and `.vue` files from. That can be IntelliJ IDEA integration with the [TypeScript Language
Service](https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API), or the [Vue Language Server
(Volar)](https://github.com/vuejs/vetur/tree/master/server), or the internal IntelliJ IDEA parser and code inspections, or a combination of the above.

The Vue Language Server (Volar) is used by default, but you can always switch to the classic TypeScript language service.

Procedure:

1. In the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Languages & Frameworks | TypeScript | Vue`.

2. In the Vue Language Server field, specify the Vue Language Server version to use.

* Accept the suggested default version.

* If you have another version of `@vue/language-server` package installed, this version appears on the list. You can select it or accept the default version. ![Select a custom Vue Language Server](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_volar_select_version.png)

* Alternatively, click Select or ![the Browse button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.general.ellipsis.svg) and specify the path to a custom `@vue/language-server` package.

3. Specify the service to use.

* By default, the Auto option is chosen, which means that the Vue Language Server (Volar) is used by default.

* Select Classic TypeScript Service to always use the TypeScript Language Service in `.ts` and `.vue` files. Note that the TypeScript language service does not work with TypeScript version 5.0.0 and later. Therefore, if your project is using one of these versions, error highlighting will be provided through the IntelliJ IDEA internal code inspections.

* Select Disabled to turn both the TypeScript language service and the Vue Language Server off and get coding assistance from the IntelliJ IDEA internal support.

4. Select the Enable service-powered type engine checkbox to evaluate types of symbols based on the data from the Vue Language Server.

By default, the checkbox is cleared, so type evaluation, resolution, code inspections and refactorings are based on the type information from the IntelliJ IDEA internal TypeScript engine.

This default behavior may result in performance issues and in bugs in type resolution because the type evaluation algorithm that the IntelliJ IDEA internal TypeScript engine uses differs from the algorithm of the Vue Language Server. Selecting the checkbox may help avoid these problems.

> **Note:**
> Some of the code highlighting and completion are always retrieved from the appropriate language service if the TypeScript Language Service checkbox on the [TypeScript
> page](settings-languages-typescript.html) is selected and Vue Language Server is in Auto or Classic TypeScript state, no matter whether the Enable service-powered type engine checkbox is selected or cleared.

#### Configure memory handling

Although IntelliJ IDEA strives at providing slick integration with language services, there may still arise out-of-memory errors induced by a language service rather than by IntelliJ IDEA itself.

To prevent out-of-memory errors or have them solved seamlessly, thus ensuring stable operation of language services, you can configure memory handling.  Learn more from [Language Services](language-services.html)

Memory handling settings for the Vue language service are always inherited from the TypeScript language service.

Procedure: Configure memory handling for TypeScript language service

1. Open settings by pressing `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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) and navigate to `Settings | Languages & Frameworks | Language Services | TypeScript`.

2. In the Language Services Memory area, choose the memory handling mode:

* Select Automatically increase memory, if available to have memory increased and language services restarted silently.

* Alternatively, select Set memory limit and specify the maximum memory to use by a language service. If the specified memory size exceeds the available RAM, IntelliJ IDEA suggests an appropriate value in a tooltip. > **Note:** > Make sure your computer has enough available RAM. If you are already at a high allocation, for example, 8GB+, consider [upgrading/downgrading](language-services.html#ls_upgrade_downgrade) or [limiting your > project scope](language-services.html#ls_limit_project_scope).

### Formatting in Vue.js applications

Procedure: Configure indentation

By default, code within top-level tags is indented uniformly, in the Vue.js-specific style. You can configure this indentation to depend on the language used, for example, be HTML or Pug-specific.

1. In the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Code Style | Vue Template`, and open the Tabs and Indents tab.

2. By default, the contents of all top-level tags are indented uniformly, in the Vue.js-specific style.                         Accept the default indentation settings or customize them using the controls on the page. As you change the settings, the Preview in the right pane shows how the changes affect code formatting.

To have the code inside top-level tags indented with regard to its language, select Specific to the language in the block.

3. In the Indent children of top-level tag field, specify the top-level tags where the code should have initial indentation.

By default, only the code inside `template` tags has initial indentation. If necessary, add other tags using commas as separators. For example, if you specify `script` in the field, the code inside all `script` tags gets initial indentation        as shown in the Preview pane.

Procedure: Configure spaces

1. By default, IntelliJ IDEA automatically inserts spaces after the opening curly brace (`{`) and before the closing one (`}`) in [Vue.js text interpolations with
Mustache syntax](https://vuejs.org/v2/guide/syntax.html#Text).

To suppress inserting spaces automatically,   open the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Code Style | Vue Template`, then open the Spaces tab and clear the Interpolations checkbox.

2. By default, when you enclose a code fragment in a block comment, the text starts right after the opening `/*` characters without any spaces. Before the closing `*/` characters no space is inserted either.

This default code style may conflict with some linters' rules, for example, ESLint. To improve the code style, configure enclosing block comments in leading and trailing spaces.

In the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Code Style | JavaScript` or `Editor | Code Style | TypeScript`, open the Code Generation tab, and configure the spaces and formatting in the Comments area.

Procedure: Configure wrapping and braces

1. In the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Code Style | Vue Template`, and open the Wrapping and Braces tab.

2. If a [JavaScript expression inside a Vue.js interpolation](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions) has line breaks, IntelliJ IDEA automatically starts this JavaScript expression from a new line and adds a new line after it.

Clear the New line after '{{' and the New line before '}}' checkboxes to change this default behavior.

> **Tip:**
> These checkboxes do not affect JavaScript expressions without line breaks inside. For example, `{{ foo }}` will not be split automatically anyway.

3. Configure multiple right margins as described in [Vue.js code style: Visual guides](code-style-vue.html#ws_vue_formatting_options).

4. Configure wrapping in interpolations as described in [Wrapping options](code-style-vue.html#ws_code_style_wrapping_options).

### Reformat Vue.js code with Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually, refer to [Run Prettier automatically on save](prettier.html#ws_prettier_run_automatically_in_current_project).

Also, Prettier can be [set as default formatter](prettier.html#ws_prettier_default_formatter) for specific files. It will run against such files every time you reformat your code with `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS)).

For more information, refer to [Reformat code with Prettier](prettier.html#ws_prettier_reformat_code).

Procedure: Reformat code with Prettier

* In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS))) .     Then select Reformat with Prettier from the context menu.

* To run Prettier automatically against specific files,   open the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Languages & Frameworks | JavaScript | Prettier`, and use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

For more information, refer to [Run Prettier
automatically on save](prettier.html#ws_prettier_run_automatically_in_current_project) and [Set Prettier as default formatter](prettier.html#ws_prettier_default_formatter).

IntelliJ IDEA can apply the key code style rules from the Prettier's configuration to the IntelliJ IDEA Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

Procedure: Apply Prettier code style rules

* In the project where Prettier is enabled, open `package.json` and click Yes in the pane at the top of the tab.

![Pane above package.json: apply Prettier code style](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_prettier_apply_code_style_pane.png)

* To re-apply the Prettier code style (after you've clicked No in the pane or modified the code style), press `Ctrl+Shift+A` (Windows), `⌘ ⇧ A` (macOS), `⌘ ⇧ A` (IntelliJ IDEA Classic (macOS)), `⌘ ⇧ P` (macOS System Shortcuts), `Ctrl+Shift+A` (XWin), `Ctrl+Shift+A` (GNOME), `Ctrl+Shift+A` (KDE), `Escape, X` (Emacs), `Ctrl+Shift+P` (Sublime Text), `⌘ ⇧ P` (Sublime Text (macOS)), `Ctrl+I` (NetBeans), `Ctrl+Shift+A` (Visual Studio), `⌘ ⇧ A` (Visual Studio (macOS)), `Ctrl+Shift+A` (Eclipse), `⌘ 3` (Eclipse (macOS)) and select  Apply Prettier Code Style Rules from the Find Action list.

### Linting TypeScript in Vue.js components using TSLint

You can lint TypeScript code in your Vue.js single file components using [typescript-tslint-plugin](https://github.com/microsoft/typescript-tslint-plugin).

Because `typescript-tslint-plugin` works only with TypeScript that is installed in the current project, make sure the `typescript` package from your project `node_modules` folder is selected in the TypeScript field on the TypeScript page   of the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))).

> **Tip:**
> Learn more about TypeScript versions from [Configure integration with the TypeScript language service](typescript-support.html#ws_ts_version).

Procedure: Install and configure typescript-tslint-plugin

1. In your command-line shell or in the embedded Terminal (`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)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))) , type:

`npm install --save-dev typescript-tslint-plugin`

2. In the `plugins` property of your `tsconfig.json` file, type:

```JSON
{
  "compilerOptions": {
    "plugins": [{"name": "typescript-tslint-plugin"}]
  }
}
```

3. When you are using `typescript-tslint-plugin`, TSLint is running via the [TypeScript language service](https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API) so you can disable the TSLint integration with IntelliJ IDEA to avoid duplicate error reporting.

To do that,   open the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Languages & Frameworks | TypeScript | TSLint`, and select Disable TSLint.

## Run a Vue.js application

Procedure:

1. Сlick ![the Run icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.run.run.svg) in the gutter next to the `dev` script in `package.json`, or execute the `npm run dev` command in the Terminal `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)), `Alt+F12` (NetBeans), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS)), or double-click the `dev` task in the [npm tool window](npm-tool-window.html) (`View | Tool Windows | npm`).

2. Wait till the application is compiled and the development server is ready.

The Run tool window or the Terminal shows the URL at which your application is running. If your application was generated with create-vue, the default URL is `http://localhost:5173/`.  Click this link to view the application.

![Vue.js app is running in the development mode](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_vue_run_app_url.png)

### Run a Vue.js application via a run/debug configuration

For applications created with `create-vue` in the IntelliJ IDEA New Project wizard [as described above](#ws_vue_create_new_app), IntelliJ IDEA generates an [npm](run-debug-configuration-npm.html) configuration  with the default name dev. This configuration runs the `vite` command that launches the development server and starts your application in the development mode.

In other cases, you need to [create a
run/debug configuration](#vue_running_and_debugging_run_via_rc_create_rc) with the actual settings, such as, host, port, etc., manually.

Procedure: Create an npm run/debug configuration

1. Go to `Run | Edit Configurations`. Alternatively, select Edit Configurations from the Run widget on the toolbar.

![Open the Edit Configurations dialog](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_run_config_create.png)

In the Edit Configurations dialog that opens,

click the Add button (![the Add button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg)) on the toolbar and select npm from the list.

2. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the `package.json`, the Node.js runtime, and the package manager to use.

In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default `dev` script but you can configure another one in your `package.json`, for example, to run the application on a custom port.

![npm run/debug configuration](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_debug_npm_rc.png)

3. Optionally:

To open the application in the browser, update the configuration as follows: in the Browser / Live Edit tab, select the After launch checkbox, select the browser to open the application in, and specify the URL address at which the application wil run.

If you are going to debug the application, select [Google Chrome](http://www.google.com/chrome/) or another [Chromium-based browser](https://www.chromium.org/).

![Browser / Live Edit tab: select browser](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_run_rc_browser_tab_select_browser.png)

Procedure: Run an application

1. From the list in the Run widget  on the toolbar, select a run configuration of the type npm and click ![the Run icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.run.run.svg) next to it. This can be the autogenerated dev configuration or a custom one that you created yourself [as described above](#vue_running_and_debugging_run_via_rc_create_rc).

![Select the dev configuration from the Run widget](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_run_select_dev_rc.png)

2. Wait till the application is compiled and the development server is ready.

The Run tool window or the Terminal shows the URL at which your application is running. If your application was generated with create-vue, the default URL is `http://localhost:5173/`.  Click this link to view the application.

![Vue.js app is running in the development mode](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_vue_run_app_url.png)

Alternatively, enable IntelliJ IDEA to open the application on start [as
described above](#ws_vue_start_app_in_dev_mode_enable_opening_browser).

> **Note:**
> When the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.

## Debug a Vue.js application

> **Note:**
> Debugging of Vue.js applications is only supported in [Google Chrome](http://www.google.com/chrome/) and in other [Chromium-based browsers](https://www.chromium.org/).

You can start a debugging session either by [launching a
run/debug configuration](#vue_debug_with_rc) or [from the Run tool
window](#vue_debug_from_tw) that shows the URL at which your application is running in the development mode.

### Start debugging via a run/debug configuration

To debug your Vue.js application you need two run/debug configurations:

* An npm configuration to start your application in the development mode, [as described above](#vue_running_and_debugging_run).

* A JavaScript Debug configuration to attach the debugger to the application that is running in the development mode. > **Note:** > If you generated your application with `create-vue`, [as described above](#ws_vue_create_new_app), IntelliJ IDEA has already generated these two run/debug configurations.

You can create a JavaScript Debug configuration within the npm configuration to launch them at once, as described in [Run and debug a
Vue application with an npm run/debug configuration](#vue_debug_two_rc).

Alternatively, launch an npm and a JavaScript Debug run/debug configurations separately, as described in [Start debugging with a JavaScript Debug run/debug configuration](#vue_debug_via_js_debug_rc).

Procedure: Run and debug a Vue.js application with a single npm run/debug configuration

1. Set the [breakpoints](using-breakpoints.html) in your code.

2. Create an npm configuration [as
described above](#vue_running_and_debugging_run_via_rc_create_rc).

If you generated your application with `create-vue`, IntelliJ IDEA has already created an npm configuration with the default name npm dev. The configuration is available from the Run widget and in the Run/Debug Configurations dialog.

3. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the `package.json`, the Node.js runtime, and the package manager to use.

In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default `dev` script but you can configure another one in your `package.json`, for example, to run the application on a custom port.

![npm run/debug configuration](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_debug_npm_rc.png)

4. In the Browser / Live Edit tab, select the After launch checkbox, select [Google Chrome](http://www.google.com/chrome/) or another [Chromium-based browser](https://www.chromium.org/) from the list, select the with JavaScript debugger checkbox, and then specify the URL at which your application will run.

![npm configuration, Browser tab](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_debug_npm_rc_browser_tab.png)

5. Click Run.

To re-run the configuration, select it from the list in the  Run widget and click ![Run](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.execute.svg) next to it.

IntelliJ IDEA runs the application in the development mode and at the same time launches a debugging session.

![Debugging session](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_debug_npm_rc_debugging_session.png)

6. When the first breakpoint is hit, switch to the [Debug tool window](debug-tool-window.html) and   proceed as usual: [step through the program](stepping-through-the-program.html),  [stop
and resume](starting-the-debugger-session.html#pause-resume)  program execution, [examine it when suspended](examining-suspended-program.html), explore the call stack and variables, set watches, evaluate variables, [view actual HTML DOM](viewing-actual-html-dom.html), and so on.

To ignore source maps and step through the actually executed code, press ![the Disable Source Maps toggle button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/sourceMapDisable.png) on the toolbar of the Debug tool window.

Procedure: Start debugging with a JavaScript Debug run/debug configuration

1. Set the [breakpoints](using-breakpoints.html) in your code.

2. Start the application in the development mode [as described above](#vue_running_and_debugging_run_steps) and wait till the application is compiled and the development server is ready.

The Run tool window or the Terminal shows the URL at which your application is running. Copy this URL to [specify it
later
in the JavaScript Debug
configuration](#vue_debug_specify_URL).

![Vue.js app is running in the development mode](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_vue_run_app_url.png)

3. Create a JavaScript Debug configuration. To do that, go to `Run | Edit Configurations` in the main menu, click ![the Add icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg), and select Javascript Debug from the list.

If you generated your application with `create-vue`, IntelliJ IDEA has already created a JavaScript Debug run/debug configuration with the default name Debug Application and the default URL `http://localhost:5173`. Select this run/debug configuration from the list under the JavaScript Debug node.

![Select the generated JavaScript debug run/debug configuration](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_debug_select_js_debug_rc.png)

4. In the Run/Debug Configurations: JavaScript Debug dialog that opens, specify the name of the configuration and the URL address at which the application is running in the development mode. You can copy this URL in the Run tool window or in the Terminal, [as described above](#vue_debug_dev_mode_URL).

![Create a JavaScript Debug configuration: specify the URL](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_debug_create_js_debug_rc.png)

> **Note:**
> If you are using the autogenerated configuration, make sure the specified URL address is the one at which your application is actually running.

5. Click Debug.

To re-run the configuration, select it from the list in the  Run widget and click ![Debug](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.run.debug.svg) next to it.

![Run a JavaScript Debug configuration from the Run widget](https://resources.jetbrains.com.cn/help/img/idea/2026.2/vue_debug_rerun_js_debug_rc.png)

6. When the first breakpoint is hit, switch to the [Debug tool window](debug-tool-window.html) and   proceed as usual: [step through the program](stepping-through-the-program.html),  [stop
and resume](starting-the-debugger-session.html#pause-resume)  program execution, [examine it when suspended](examining-suspended-program.html), explore the call stack and variables, set watches, evaluate variables, [view actual HTML DOM](viewing-actual-html-dom.html), and so on.

To ignore source maps and step through the actually executed code, press ![the Disable Source Maps toggle button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/sourceMapDisable.png) on the toolbar of the Debug tool window.

### Start debugging from the Run tool window or from the built-in Terminal

If your application is running in the development mode on `localhost`, in particular, if it was generated with `create-vue`, you can launch a debugging session right from the >Run tool window or from the built-in Terminal.

Procedure:

1. Set the [breakpoints](using-breakpoints.html) in your code.

2. Start the application in the development mode [as described above](#vue_running_and_debugging_run) and wait till the application is compiled and the development server is ready.

3. The Run tool window or the Terminal shows the URL at which your application is running.   Hold `Ctrl+Shift` (Windows), `Ctrl+Shift` (macOS), `Ctrl+Shift` (IntelliJ IDEA Classic (macOS)), `Ctrl+Shift` (macOS System Shortcuts), `Ctrl+Shift` (XWin), `Ctrl+Shift` (GNOME), `Ctrl+Shift` (KDE), `Ctrl+Shift` (Emacs), `Ctrl+Shift` (Sublime Text), `Ctrl+Shift` (Sublime Text (macOS)), `Ctrl+Shift` (NetBeans), `Ctrl+Shift` (Visual Studio), `Ctrl+Shift` (Visual Studio (macOS)), `Ctrl+Shift` (Eclipse), `Ctrl+Shift` (Eclipse (macOS)) and click this URL link. IntelliJ IDEA starts a debugging session with an automatically generated Debug Application configuration of the type [JavaScript Debug](run-debug-configuration-javascript-debug.html).

![Starting a debugging session from the Run tool window](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_start_debugging_from_run_tool_window.animated.gif)

If you launched your application in the development mode from the [New Terminal](terminal-emulator.html), you can just click the Start debugging in browser button next to the link.

![New Terminal: the Start debugging in browser button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_start_debugging_from_new_terminal_start_debugging_button.png)

By default, the button is not shown. To have it displayed,   open the Settings dialog (`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` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Advanced Settings`, and select the Show 'Start Debugging in Browser' button for localhost links in the Terminal checkbox in the JavaScript and TypeScript area.

> **Note:**
> The button is not available from the New Terminal in the WSL.

When the first breakpoint is hit, switch to the [Debug tool window](debug-tool-window.html) and   proceed as usual: [step through the program](stepping-through-the-program.html),  [stop
and resume](starting-the-debugger-session.html#pause-resume)  program execution, [examine it when suspended](examining-suspended-program.html), explore the call stack and variables, set watches, evaluate variables, [view actual HTML DOM](viewing-actual-html-dom.html), and so on.

To ignore source maps and step through the actually executed code, press ![the Disable Source Maps toggle button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/sourceMapDisable.png) on the toolbar of the Debug tool window.

### Troubleshooting for Node.js 17+

If you are using Nuxt in the application and your Node.js version 17 or later, during a debugging session, you may face network connectivity issues. That may result in problems with attaching the debugger or with loading sourcemaps.

The workaround is to pass `--host 127.0.0.1` to the server by updating the `dev` script in your `package.json` as follows:

```JSON
"dev": "nuxt --hostname=127.0.0.1"
```

## Use several frameworks within a project

Sometimes you may need to use other frameworks within one Vue.js project.

To get context-aware coding assistance in each file, create a configuration file `.ws-context` and specify which framework should be used in each particular file or folder. The settings from this file will override the default configuration.

Procedure:

1. In the project root, select New | File from the context menu and specify `.ws-context` as the file name.

2. In `.ws-context`, use two types of properties:

* `<context-name>` with the context value string

* A GLOB pattern with a context details object

3. Use the following context values:

* `framework`: `vue`, `angular`, `react`, `svelte`, `astro`

* `angular-template-syntax`: `V_2`, `V_17`

* `nextjs-project`: `nextjs`

* `astro-project`: `astro`

* `vue-store`: `vuex`, `pinia`

* `vue-class-component-library`: `vue-class-component`, `vue -property-decorator`, `vue-facing-decorator`

* `jsdoc-dialect`: `jsdoc-typescript`, `jsdoc-closure`

4. Use path nesting for simplicity.

* The last segment of a GLOB path is the file name pattern, it only supports the `*` wildcard.

* If the last segment is a `**` it matches all nested directories and files.

* Top level context properties should have the `/**` pattern.

5. When several patterns match the same file name, the following rules are used for disambiguation:

* Choose the pattern with maximum number of path segments, excluding `**` segments.

* Choose the pattern that is a pure file name pattern, which means that it does not end in `**` or `/`.

* Choose the pattern that was defined first.

### Example

Suppose you have a project with a number of frameworks used in various folders.

![A project with different frameworks](https://resources.jetbrains.com.cn/help/img/idea/2026.2/several_frameworks_context_project_structure.png)

To get context-aware assistance for each file in the project, add the following code to `.ws-context`:

```JSON
{
  "framework": "vue",
  "angular-template-syntax": "V_2",
  "src/**/app/**": {
    "framework": null,
    "app.component.html" : {
      "framework": "angular",
      "angular-template-syntax": "V_17"
    }
  },
  "src/**/p*-editor/*.html" : {
    "framework" : "angular"
  }
}
```

## See also

### Web Resources

[WebStorm blog: Initial support for Vue](https://blog.jetbrains.com/webstorm/2017/02/webstorm-2017-1-eap-171-2822/) [WebStorm blog: Completion and navigation for Vue components](https://blog.jetbrains.com/webstorm/2017/02/webstorm-2017-1-eap-171-3224/)

### Procedures

[npm, pnpm, and Yarn](installing-and-removing-external-software-using-node-package-manager.html)