RubyMine 2019.1 Help

Vue.js

RubyMine 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. Install and activate the Vue.js repository plugin on the Plugins page as described in Managing plugins.

Creating a new Vue.js application

The recommended way to create a new Vue.js app is to use vue-cli, which is an official tool for scaffolding Vue.js applications. If you create your application with Vue CLI version 2, you can select one of 6 default project templates and then answer some questions about additional tools like linters and test runner to use in your development.

Of course, you can also create an empty RubyMine project and install Vue.js in it.

To install the vue-cli package

  • Open the built-in Terminal (View | Tool Windows | Terminal) and type npm install --global vue-cli at the command prompt.

To create an application

  1. Select File | New | Project from the main menu or click Create New Project on the Welcome screen. The 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. In the vue-cli or @vue/cli field, specify the folder where the vue-cli or the @vue/cli package is stored.

    4. From the Project template list, choose the Vue.js template to use.

  4. When you click Create, RubyMine asks you some additional questions about tools, like linters and the test runner, that can be added to the project. These questions vary depending on the template you've selected. After that, RubyMine generates a Vue.js-specific project with all the required configuration files and downloads the necessary dependencies.

To create an empty RubyMine project

  1. Select File | New | Project from the main menu or click Create New Project on the Welcome screen. The 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, RubyMine 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 RubyMine 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 Check out from Version Control on the Welcome screen or select VCS | Check out from Version Control from the main menu.

  2. Select your version control system from the list.

  3. In the VCS-specific dialog that opens, type your credentials and 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

RubyMine 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. RubyMine passes them to the new component with props 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, RubyMine shows a warning. Otherwise a new single-file component is created and imported into the parent component.

Coding assistance

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

Complete your code

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

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

Generating code with Vue.js Live templates

With RubyMine, 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 RubyMine, you can format selected code fragments as well as entire files or directories using the Reformat with Prettier action. RubyMine adds this action as soon as you install Prettier as a dependency in your project or globally on your computer.

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 N/A 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

RubyMine can apply the key code style rules from the Prettier's configuration to the RubyMine 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: 8 May 2019

See Also