--- title: IntelliVue url: 'https://www.twelvetone.tv/docs/developer-tools/intellij-plugins/intellivue' markdown: 'https://www.twelvetone.tv/docs/developer-tools/intellij-plugins/intellivue.md' date: '2026-09-25' description: 'The IntelliVue plugin provides the IntelliJ user with features that include analysis, actions, and utilities, for Vue Single File Components. Table' taxonomy: category: - docs devtype: - cc --- [](#) [ Home ](https://www.twelvetone.tv/docs/) [ Developer Tools ](https://www.twelvetone.tv/docs/developer-tools) [ IntelliJ Plugins ](https://www.twelvetone.tv/docs/developer-tools/intellij-plugins) IntelliVue This product is in active development and has been released under the [Creative Commons license](https://creativecommons.org/licenses/by-nd/4.0/). The *IntelliVue* plugin provides the IntelliJ user with features that include analysis, actions, and utilities, for *Vue Single File Components*. #### Table of Contents - [Overview](#overview) - [Code Generation And Management](#code-generation-and-manag) - [Component Analysis](#component-analysis) - [Dependencies](#dependencies) - [Documentation](#documentation) - [Bug Reporting And Feature Requests](#bug-reporting-and-feature) - [License](#license) - [New Features](#new-features) - [Composition API Support](#composition-api-support) - [Usage](#usage) - [Analyze Actions](#analyze-actions) - [Analyze Single File](#analyze-single-file) - [Analyze All Files](#analyze-all-files) - [Show Vue Analysis When Opening](#show-vue-analysis-when-op) - [Show Vue Analysis When Selecting](#show-vue-analysis-when-se) - [Code Actions and Intentions Popup](#code-actions-and-intentio) - [Create/Goto Vue Implementation](#create-goto-vue-implement) - [Create Vue Implementation](#create-vue-implementation) - [Goto Vue Implementation](#goto-vue-implementation) - [Menu Actions](#menu-actions) - [Create Vue Method...](#create-vue-method) - [Goto Vue Reference](#goto-vue-reference) - [Order Vue Options](#order-vue-options) - [Component Option Creation Dialog](#component-option-creation) - [General](#general) - [Method](#method) - [Prop](#prop) - [Computed](#computed) - [The Vue Report](#the-vue-report) - [Component Analysis Sections](#component-analysis-sectio) - [Single File Component sections](#single-file-component-sec) - [Component Option sections](#component-option-sections) - [Option details](#option-details) - [Global Actions](#global-actions) - [Actions](#actions) - [Goto](#goto) - [Search](#search) - [Add New Items and Sections](#add-new-items-and-section) - [Close](#close) - [Refresh](#refresh) - [Sort](#sort) - [Sort By Convention](#sort-by-convention) - [Sort By Name](#sort-by-name) - [Help](#help) - [Other Features](#other-features) - [Vue Resources](#vue-resources) - [Usage And Error Reporting](#usage-and-error-reporting) - [Bugs and Features](#bugs-and-features) - [Wishlist](#wishlist) - [Active Issues](#active-issues) - [Change Log](#change-log) If you use this plugin, please give it a 5-star rating on the [IntelliJ site](https://plugins.jetbrains.com/plugin/12014-intellivue). It will encourage our developers to work even harder! # Overview 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. # Code Generation And Management 10. 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. 11. Reorder component options according to the *Vue Style Guide*. # Component Analysis 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: 15. Single File Component sections (template, script, style). 16. Component Option sections (data, props, computed, etc). 17. Option details (data items, props items, computed items, method items). Clicking on an item will locate and select it. Items not present can be added. Searching and sorting features are also available. # Dependencies This plugin depends on the *Javascript* and *VueJs* plugins, both provided by *JetBrains*. # Documentation Official documentation is a available at . # Bug Reporting And Feature Requests Please use GitHub for reporting bugs and requesting features: [GitHub-IntelliVue](https://github.com/Flamenco/intellivue). # License 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. . # New Features The latest release of IntelliVue has support for Vue3 setup scripts. ## Composition API Support 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](https://github.com/Flamenco/intellivue/issues/14) # Usage todo: This entire section is under active development. All actions are added to a top level *Vue Menu* (rc.7) ## Analyze Actions ### Analyze Single File 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. ### Analyze All Files 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. ### Show Vue Analysis When Opening This will open the analysis every time a SFC file is opened in the editor. Requires enabling "Experimental Features" in the IntelliVue plugin settings ### Show Vue Analysis When Selecting This will open the analysis every time a SFC file is selected in the editor. Requires enabling "Experimental Features" in the IntelliVue plugin settings ## Code Actions and Intentions Popup ### Create/Goto Vue Implementation 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 Vue Implementation Create a new *Vue Option* item from a dialog. See Create/Goto Vue Implementation ### Goto Vue Implementation Navigate to a *View Option* item implementation. # Menu Actions 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*. ## Create Vue Method... Creates a stub for a Vue method, prop, computed, or asyncComputed option. A dialog is opened for creating the new stub. ## Goto Vue Reference Move the caret to the currenly selected reference name, scrolls to the caret, and deselects the current selection. ## Order Vue Options Orders the Vue options according to the [Vue Style Guide](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended) best practices. # Component Option Creation Dialog A creation dialog is presented when creating a new property or method in the *Vue Options* object. ## General NameThe name of the method or property to create.SectionThe destination in the *Vue Options* object to place the item.TypeThe property type, or method return type.ValueThe value (or default value) of the method or property.## Method AsyncIndicates if the property is async.ArgumentsSpecify the method's arguments.## Prop RequiredIndicates if the property is required.## Computed Getter / SetterGenerate a computed getter and setter.# The Vue Report When analyzing a Vue file, a report is opened in a tool window. Columns appear for several types of Vue options. ## Component Analysis Sections Various sections of a SFC are displayed, with options for filtering, navigating, and adding items and sections. ### Single File Component sections This column includes template, script, style section. ### Component Option sections This column includes options such as data, props, computed, etc. ### Option details For each option, this show a list of items within that option. Examples are data items, props items, computed items, and method items. ### Global Actions Global searching and sorting actions are also available. ## Actions ### Goto Click on an installed column item to select and navigate in the editor. ### Search 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 Add new items and sections by clicking on the *add* or *add new* buttons. ### Close Close the analysis window by clicking *Close* on the sidebar. ### Refresh Refresh the analysis window by clicking *Analyze* on the sidebar. ### Sort SFC and component options can be sorted. Comments will be preserved. #### Sort By Convention 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 for details. #### Sort By Name Sorts alphabetically by name. ### Help Opens a help document in a browser. # Other Features ## Vue Resources Displays a filterable list of links to various Vue websites. # Usage And Error Reporting 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. # Bugs and Features Request new features and report bugs at our GitHub repository [GitHub-IntelliVue](https://github.com/Flamenco/intellivue). ## Wishlist # Active Issues - 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. # Change Log ```

RC7

  • Do not report unrelated errors (part 2)
  • Add all actions to a dedicated top-level Vue Menu
  • Replace IDEA specific DataKeys with PlatformDataKeys
  • Do not report unrelated errors (part 2)

RC6

  • Do not report unrelated errors

RC5

  • Add dependency information for compatibility in products other than IDEA

RC4

  • Open file if not already active when analyzing SFC

RC3

  • Add keyboard shortcut to `Goto/Create Vue Option` action
  • Component Create Dialog: Focus the option list box after opening

RC2

  • Add a search filter to the `create options` list box
  • Add github repo for issue reporting
  • Update issue reporting URL

RC1

  • Initial release

``` [ ](https://www.twelvetone.tv/docs/developer-tools/intellij-plugins/i18n) [](https://www.twelvetone.tv/docs/developer-tools/intellij-plugins/intellitidy) --- ## Navigation - Parent: [IntelliJ Plugins](https://www.twelvetone.tv/docs/developer-tools/intellij-plugins.md) - Previous: [i18n Plugin (Internationalization)](https://www.twelvetone.tv/docs/developer-tools/intellij-plugins/i18n.md) - Next: [IntelliTidy](https://www.twelvetone.tv/docs/developer-tools/intellij-plugins/intellitidy.md)