IntelliJ IDEA 2020.1 Help

Vue.js

Vue.js is a framework for developing user interfaces and advanced single-page applications. IntelliJ IDEA provides support for the Vue.js building blocks of HTML, CSS, and JavaScript with Vue.js-aware code completion for components, including components defined in separate files, attributes, properties, methods, slot names, and more.

With the built-in debugger, you can debug your Vue.js code right in IntelliJ IDEA, which can automatically generate the necessary run/debug configurations you need: an npm configuration that launches the development server and starts your application in the development mode and a JavaScript Debug configuration that launches a debugging session.

Before you start

  1. Download and install Node.js.

  2. Install and enable the Vue.js plugin on the Plugins page as described in Installing plugins from repository.

Creating a new Vue.js application

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

Of course, you can still download Vue CLI yourself or create an empty IntelliJ IDEA project as described in Creating projects and bootstrap it with Vue.js and other tools, such as babel, webpack, ESLint, etc.

Create an application

  1. Select File | New | Project from the main menu or click the New Project button on the Welcome screen.

  2. In the New Project dialog, select JavaScript in the left-hand pane.

  3. In the right-hand pane, choose Vue.js and click Next.

  4. On the second page of the wizard, specify the project name and the folder to create it in. 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.

    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.

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

  5. When you click Finish, IntelliJ IDEA 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.

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 IntelliJ IDEA and download the required dependencies.

Open the application sources that are already on your machine

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

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.

Download the dependencies

Writing and editing your code

In .vue files, IntelliJ IDEA 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, IntelliJ IDEA invokes the TypeScript Language Service for type checking and shows detected errors in the Errors and Compile errors tabs of the TypeScript tool window. Alternatively, you can use TsLint as described in Linting TypeScript in Vue.js components using TSLint

Vue.js components

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

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

Extract components

  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, IntelliJ IDEA shows a warning. Otherwise a new single-file component is created and imported into the parent component.

Code completion

Complete code inside script, style, and template blocks

  • By default, IntelliJ IDEA 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.

Complete Vue.js properties and methods

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

Complete slot names

  • IntelliJ IDEA 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, IntelliJ IDEA shows suggestions for these names in the v-slot directive of a template tag.

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

Complete components defined in separate files

  • If a component is defined in several files, IntelliJ IDEA 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 stylesheet 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.

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

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

Complete code inside Vue.js injections

Within Vue.js injections inside HTML files, IntelliJ IDEA recognizes Vue.js syntax and highlights your code accordingly. You can also get completion for symbols from Vue.js libraries that are linked from a CDN in an HTML file without adding these libraries to your project dependencies.

Download libraries linked via CDN
  1. Open the HTML file with a CDN link to an external Vue.js library. IntelliJ IDEA highlights the link.

  2. To enable completion for the library, press Alt+Enter on the link and select Download library from the list. Alternatively, hover the mouse over the link and click Download library.

The library is added to the list of JavaScript libraries on the Settings | Languages and Frameworks | JavaScript | Libraries page, see Configuring a library added via a CDN link for details.

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, IntelliJ IDEA 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.

Vue.js live templates

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

  1. Type the abbreviation of the template to use 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 IntelliJ IDEA, you can format selected code fragments as well as entire files or directories using the Reformat with Prettier action. IntelliJ IDEA adds this action as soon as you install Prettier as a dependency in your project or globally on your computer.

You can also configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually. See Reformat code with Prettier for details.

Reformat code with Prettier

  • In the editor, select the code fragment to reformat and press N/A or select Reformat with Prettier from the context menu. To reformat a file or a folder, select it in the Project tool window and press N/A or select Reformat with Prettier from the context menu.

  • To run Prettier automatically when a file in the current project is changed, open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | JavaScript | Prettier, select the Run on save for files checkbox, and specify the pattern that defines the set of files to be reformatted every time such file is saved.

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

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.

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 IntelliJ IDEA 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.

Running and debugging a Vue.js application

For applications created with Vue CLI as described above, IntelliJ IDEA generates two run/debug configurations with default settings:

  • An npm configuration with the default name npm serve. This configuration runs the npm serve command that launches the development server and starts your application in the development mode.

  • A JavaScript Debug configuration with the default name Debug Application. This configuration launches a debugging session.

Run a Vue.js application

  • Select the npm serve run configuration from the list on the toolbar and click Run next to the list.

    Alternatively, run npm start in the Terminal Alt+F12 or double-click the start task in the npm tool window (View | Tool Windows | npm).

  • Wait till the application is compiled and the development server is ready. Open your browser at http://localhost:8080/ to view the application.

When the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.

Debug a Vue.js application

  1. Set the breakpoints in your code.

  2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

  3. To view the application, open your browser at the URL that is shown in the Run tool window, by default it is http://localhost:8080/.

    If you are using another port or your application was not created with Vue CLI, copy the URL address at which your application is actually running, you will later specify this URL in a debug configuration.

  4. If you created your application with Vue CLI and it is running on the default port 8080, IntelliJ IDEA generates a JavaScript Debug configuration with the default name Debug Application.

    Otherwise, create a new JavaScript debug configuration: go to Run | Edit Configurations, click the Add icon, and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog, paste the saved URL in the URL field and save the configuration.

  5. From the list of configurations, select the autogenerated Debug Application configuration or your newly created custom one and start a debugging session by clicking Debug next to the list.

  6. When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

Last modified: 29 June 2020