This feature is supported in the Ultimate edition only.

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

  • Recognition of the .vue file type.
  • 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 directives in templates.
  • Code completion (⌃Space⌃Space⌃Space^ Space⌥ Slash and navigation (⌘B⌘BF3F12^ ⌥ G) for Vue components inside the template tag:

    ws_vue_completion.png

Before you start, install and enable the Vue.js plugin. The 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. That is all, no additional configuration is required to have all Vue.js-related features work in any project.

To start working with Vue.js, do one of the following:
  • 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 (press ⌥F12⌥F12⌥F12⌥ F12⌥ F12 or choose View | Tool Windows | Terminal on the main menu) and type npm install vue at the command line prompt.
  • Alternatively, follow the Vue.js installation instructions.