This product is in active development and has been released under the Creative Commons license.

The IntelliVue plugin provides the IntelliJ user with features that include analysis, actions, and utilities, for Vue Single File Components.

If you use this plugin, please give it a 5-star rating on the IntelliJ site. It will make us very happy, and will also encourage the developers to work even harder.

The IntelliVue plugin for IntelliJ provides analysis, actions, and utilities for Vue Single File Components.

This plugin adds additional functionality on top of the standard Vue plugin.

Actions and Intentions are added to create and navigate from references to implementation. When creating a new Vue component option, a dialog is displayed.

Full undo-redo support is enabled, so you are assured that your important code will not get corrupted by unexpected operations.

  • Create and navigate to props, data, methods, etc. in your Single File Component files by simply selecting, or placing the caret next to a reference in any template, script, or comment.
  • Reorder component options according to the Vue Style Guide.
  • Tools for navigating and manipulating Vue components are provided. Analyze a Vue SFC and list component option sections, methods, and fields. The list is presented in a dedicated tool window and linked to a SFC (.vue) file. In the spirit of Vue, changes in the file and the tool window are reactive and synchronized.

    After analyzing a file, a tool window is displayed listing:

    Clicking on an item will locate and select it. Items not present can be added. Searching and sorting features are also available.

    This plugin depends on the Javascript and VueJs plugins, both provided by JetBrains.

    Official documentation is a available at http://www.twelvetone.tv/docs/developer-tools/intellij-plugins/intellivue.

    Please use GitHub for reporting bugs and requesting features: GitHub-IntelliVue.

    The binary version of this plugin is provided under the Creative Commons CC By-ND 4.0 License. You can use, copy, and redistribute, free of charge, even commercially, but must not modify it. https://creativecommons.org/licenses/by-nd/4.0/.

    todo: This entire section is under active development.

    All actions are added to a top level Vue Menu (rc.7)

    An analysis window will open for the currently selected SFC. You can use the shortcut command shift-meta-alt-v. You can always change the shortcut in your IntelliJ key map.

    In this mode, every time a SFC is opened or selected, an analysis window will also open. When the SFC is closed, the analysis will also close.

    This will open the analysis every time a SFC file is opened in the editor.

    This will open the analysis every time a SFC file is selected in the editor.

    This command will navigate to the Vue component implementation from a reference. If the implementation does not already exist, a dialog will be presented with options to create it. You can specify the target section (data, computed, props, etc) from the dialog.

    If you have text selected, the selection will be used, otherwise the id adjacent to the caret will be used.

    We use this so often, it has been assigned the keyboard shortcut shift-meta-alt-space.

    Create a new Vue Option item from a dialog. See Create/Goto Vue Implementation

    Navigate to a View Option item implementation.

    Various actions are added to the Vue Menu. You can assign keyboard shortcuts using IntelliJ keyboard preferences.

    These actions are available from the Vue Menu if an valid ID is selected, or the caret is positioned on an item in a Vue Template.

    Creates a stub for a Vue method, prop, computed, or asyncComputed option.

    A dialog is opened for creating the new stub.

    Move the caret to the currenly selected reference name, scrolls to the caret, and deselects the current selection.

    Orders the Vue options according to the Vue Style Guide best practices.

    A creation dialog is presented when creating a new property or method in the Vue Options object.

    Name
    The name of the method or property to create.
    Section
    The destination in the Vue Options object to place the item.
    Type
    The property type, or method return type.
    Value
    The value (or default value) of the method or property.

    Async
    Indicates if the property is async.
    Arguments
    Specify the method's arguments.

    Required
    Indicates if the property is required.

    Getter / Setter
    Generate a computed getter and setter.

    When analyzing a Vue file, a report is opened in a tool window.
    Columns appear for several types of Vue options.

    Various sections of a SFC are displayed, with options for filtering, navigating, and adding items and sections.

    This column includes template, script, style section.

    This column includes options such as data, props, computed, etc.

    For each option, this show a list of items within that option. Examples are data items, props items, computed items, and method items.

    Global searching and sorting actions are also available.

    Click on an installed column item to select and navigate in the editor.

    Search for properties and methods within long lists of items using the text filters at the top of each column. You can also search over all lists using the sidebar search command.

    Add new items and sections by clicking on the add or add new buttons.

    Close the analysis window by clicking Close on the sidebar.

    Refresh the analysis window by clicking Analyze on the sidebar.

    SFC and component options can be sorted. Comments will be preserved.

    To sort by Vue best-practices, click the Sort By Convention button in the sidebar. The is also a menu item for this. (code/sort vue options) See https://vuejs.org/v2/style-guide/ for details.

    Sorts alphabetically by name.

    Opens a help document in a browser.

    By default, we collect anonymous usage and error reports. This is used by our developers to create a better product, and not for any marketing purposes.

    When a product reports an execution error, the report only inludes the function names that led up to the issue, and nothing more.

    We also keep a count the menu and context items and invoked in order to understand where we should focus our efforts. Release-Candidate, Beta, and Free versions of our products may not allow opting out of reporting.

    Request new features and report bugs at our GitHub repository GitHub-IntelliVue.

    • Scrolling the Vue report window does not work well using a Mac touchpad.
    • The analysis window requires JavaFX. Java version 11 and higher must have JavaFX included. Sun removed JavaFX from Java 11 and put it in a separate Jar. However, the official IntelliJ bundled IDE Java 11 version does include this dependency and is compatible.

    <p>
      RC7
    <ul>
      <li>Do not report unrelated errors (part 2)</li>
      <li>Add all actions to a dedicated top-level <em>Vue Menu</em></li>
      <li>Replace IDEA specific DataKeys with PlatformDataKeys</li>
    </ul>
    <ul>
      <li>Do not report unrelated errors (part 2)</li>
    </ul>
    </p>
    
    <p>
    RC6
    <ul>
      <li>Do not report unrelated errors</li>
    </ul>
    </p>
    
    <p>
    RC5
    <ul>
      <li>Add dependency information for compatibility in products other than IDEA</li>
    </ul>
    </p>
    
    <p>
      RC4
    <ul>
      <li>Open file if not already active when analyzing SFC</li>
    </ul>
    </p>
    
    <p>
      RC3
    <ul>
      <li>Add keyboard shortcut to `Goto/Create Vue Option` action</li>
      <li>Component Create Dialog: Focus the option list box after opening</li>
    </ul>
    </p>
    
    <p>
      RC2
    <ul>
      <li>Add a search filter to the `create options` list box</li>
      <li>Add github repo for issue reporting</li>
      <li>Update issue reporting URL</li>
    </ul>
    </p>
    
    <p>
      RC1
    <ul>
      <li>Initial release</li>
    </ul>
    </p>