Vue.js
Introduction
WebStorm provides intelligent support for the Vue.js framework including:
- Recognition of the
.vue
file type. - Support for
script
,style
, andtemplate
blocks in.vue
files. WebStorm by default provides code completion for ECMAScript 6 inside script blocks and for CSS inside style block. WebStorm also recognizes thelang
attribute inside thescript
andstyle
tags and allows you to use TypeScript, Pug, and CSS preprocessors instead. - Completion for Vue directives in templates.
- Code completion (Ctrl+Space and navigation (Ctrl+B) for Vue components inside the
template
tag:
Before you start
Before you start, make sure the Vue.js plugin is enabled. The plugin is activated by default. If the plugin is disabled, enable it on the Plugins page as described in Enabling and Disabling Plugins.
That is all, no additional configuration is required to have all Vue.js-related features work in any project.
Working with Vue.js
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 WebStorm Terminal (press Alt+F12 or choose on the main menu) and typenpm install vue
at the command prompt. - Alternatively, follow the Vue.js installation instructions.
Last modified: 29 November 2017