Vue.Js

This feature is only supported in the Ultimate edition.

IntelliJ IDEA provides intelligent support for the Vue.js framework including:

• Recognition of the .vue file type and a dedicated .vue file template for Vue.js components.
• Support for script, style, and template blocks in .vue files. IntelliJ IDEA by default provides code completion for ECMAScript 6 inside script blocks and for CSS inside style block. IntelliJ IDEA also recognizes the lang attribute inside the script and style tags and allows you to use TypeScript, Pug, and CSS preprocessors instead.
• Completion for Vue.js directives in templates.
• Adding closing curly braces (}) in Vue.js templates automatically.
• Code completion (Ctrl+Space and navigation (Ctrl+B) for Vue components inside the template tag:

  

• Code completion and navigation to the definition for Vue.js properties, properties in the data object, computed properties, and methods.

• A collection of Live templates for Vue.js adapted from the collection created by Sarah Drasner.

Before you start
Install and enable the Vue.js plugin. The Vue.js plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

To start working with Vue.js

• Just open an existing project. All Vue.js-related features will work without any additional configuration.
• To get better code completion for Vue API, install the vue package in your project via npm if it is not installed yet: open the built-in IntelliJ IDEA Terminal (Alt+F12) and type npm install vue at the command prompt.

  Alternatively, follow the Vue.js installation instructions.

To create a Vue.js component
In the Project view, select the parent folder for the new component and choose Vue Component from the list.

To use a Vue.js Live template

1. Type the template's abbreviation or press Ctrl+J and select it from the list of available templates.
2. To expand the template, press Tab.
3. To move from one variable to another inside the template, press Tab again.