WebStorm 2019.3 Help

Vue.js

WebStorm integrates with the Vue.js framework intended for developing user interfaces and advanced single-page applications.

Before you start

  1. Make sure you have Node.js on your computer.

  2. Make sure the Vue.js bundled plugin is enabled on the Plugins page, see Managing plugins for details.

Creating a new Vue.js application

The recommended way to create a new Vue.js app is Vue CLI, which WebStorm downloads and runs for you using npx.E

Of course, you can still download Vue CLI yourself or create an empty WebStorm project and install Vue.js in it.

To create an application

  1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The Create New Project Dialog opens.

  2. In the left-hand pane, choose Vue.js.

  3. In the right-hand pane:

    1. Specify the path to the folder where the project-related files will be stored.

    2. In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.

    3. 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. When creating an application, select the folder where the @vue/cli package is stored.

    4. To bootstrap your application with babel and ESLint, select the Use the default project setup checkbox.

  4. When you click Create, WebStorm 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.

To create an empty WebStorm project

  1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The Create New Project Dialog opens.

  2. In the left-hand pane, choose Empty Project.

  3. Specify the path to the folder where the project-related files will be stored.

  4. When you click Create, WebStorm creates and opens an empty project.

To install Vue.js in an empty project

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

  2. In the embedded Terminal (Alt+F12), type:

    npm install vue

Starting with an existing Vue.js application

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

To open the application sources that are already on your machine

  • Click Open 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.

To check out the application sources from your version control

  1. Click Get from Version Control on the Welcome screen or select VCS | Get from Version Control from the main menu.

  2. In the invoked dialog, select your version control system from the list and specify the repository to check out the application sources from.

To download the dependencies

  • Click Run 'npm install' in the popup:

    Opening an Angular application and downloading the dependencies from package.json

Creating Vue.js components

WebStorm recognizes the .vue file type and provides a dedicated .vue file template for Vue.js components.

To create a Vue.js component

  • In the Project tool window, select the parent folder for the new component and choose Vue Component from the list.

    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. WebStorm passes them to the new component with properties and copies the related styles.

To extract a component

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

    • To use the intention action, press Alt+Enter, 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, WebStorm shows a warning. Otherwise a new single-file component is created and imported into the parent component.

Coding assistance

In .vue files, WebStorm 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, WebStorm invokes the TypeScript Language Service for type checking and shows detected errors in the Errors and Compile errors tabs of the TypeScript tool window. See Verifying TypeScript for details.

Code completion

By default, WebStorm provides code completion for ECMAScript 6 inside script blocks and for CSS inside style blocks.

Vue.js: completion for ES6 inside <script> tag

Inside the template tag, code completion Ctrl+Space and navigation to the definition Ctrl+B for Vue.js components and attributes is available.

WebStorm also suggests completion for Vue.js properties, properties in the data object, computed properties, and methods.

WebStorm provides completion for the names of slots from library components and from components defined in your project.

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

Completion for named Vue.js slots defined in your project

If you’re using Vuetify, Quasar, or BootstrapVue, code completion for slot names is also available.

Completion for named Vue.js slots from library components

If a component is defined in several files, WebStorm 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 stylsheet 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.

Completion for vue.js components defined in separate files

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

Completion for templates inside template literals within a template property

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

Parameter hints

Parameter hints show the names of parameters in methods and functions to make your code easier to read. By default, parameter hints are shown only for values that are literals or function expressions but not for named objects.

Configure parameter hints

  1. Open the Settings/Preferences dialog Ctrl+Alt+S and go to Editor | Inlay Hints | Vue.

  2. Select Parameter hints from the list, make sure the Show parameter hints checkbox is selected, and then specify the context where you want parameter hints shown.

  3. For some methods and functions, WebStorm does not show parameter hints in any context. Click Black list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the 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.

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/Preferences dialog Ctrl+Alt+S.

Install and configure typescript-tslint-plugin

  1. In the embedded Terminal (Alt+F12), type:

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

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

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

  3. When you are using typescript-tslint-plugin, TSLint is running via the TypeScript Language Service so you can disable the TSLint integration with WebStorm to avoid duplicate error reporting.

    To do that, open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | TyprScript | TSLint, and select Disable TSLint.

Generating code with Vue.js Live templates

With WebStorm, you can use a collection of Live templates for Vue.js adapted from the collection created by Sarah Drasner.

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.

Reformatting Vue.js code with Prettier

Prettier is a tool to format .js, .ts, .css, .less, .scss, .vue, and .json code. With WebStorm, you can format selected code fragments as well as entire files or directories using the Reformat with Prettier action. WebStorm adds this action as soon as you install Prettier as a dependency in your project or globally on your computer. Learn more from Prettier.

To reformat code with Prettier

  • Select the code fragment to reformat in the editor or select a file or a folder in the Project tool window and press Ctrl+Shift+Alt+P or select Reformat with Prettier from the context menu.

  • Alternatively, press Ctrl+Shift+A and select Reformat with Prettier from the Find Action list.

    ws_reformat_with_prettier_vue.png

WebStorm can apply the key code style rules from the Prettier's configuration to the WebStorm 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.

To 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

  • To re-apply the Prettier code style (after you've clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.

Last modified: 17 February 2020