Vue.js
WebStorm 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
, 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.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.
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 WebStorm Terminal (Alt+F12) and typenpm install vue
at the command prompt.
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
- Type the template's abbreviation or press Ctrl+J and select it from the list of available templates.
- To expand the template, press Tab.
- To move from one variable to another inside the template, press Tab again.
Last modified: 26 March 2018