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 encourage our 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.
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/.
The latest release of IntelliVue has support for Vue3 setup scripts.
When selecting data, non reactive data, computed, or methods, your created item will be added to a setup() method and exported in the method's returned object (if the script is not a setup script).
You will still need to manually import ref or computed from the Vue module if used but not already present.
Help us make this feature better by commenting on our GitHub Vue 3.0 support thread: Vue 3.0 GitHub Issues
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.
Requires enabling "Experimental Features" in the IntelliVue plugin settings
This will open the analysis every time a SFC file is selected in the editor.
Requires enabling "Experimental Features" in the IntelliVue plugin settings
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 <a=href='#create-goto-vue-implementation'>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.
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.
Displays a filterable list of links to various Vue websites.
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 includes 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.
<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>