IntelliJ IntelliVue Plugin for Vue

My company recently released an IntelliJ plugin for Vue Single File Components. It has been pretty stable and no bug reports since release a few months ago. It is the 3rd most downloaded Vue plugin on the JetBrains site.

You can sort your Vue options by convention, analyze Vue SFC files, and create any option (data, method, computed, etc) while you type, right from within an HTML template or script block.

Let us know what you think!

1 Like

@Flamenco
Saw in the comments someone says it doesn’t work on Webstorm (14 May 2019).

Before I download and try it, can you please comment if it works on Webstorm?

Thanks :slight_smile:

Yes, it works on Webstorm.

Here is the documented issue report and fix.
https://github.com/Flamenco/intellivue/issues/2.

Please confirm it worked. Thanks!

1 Like

Indeed it works :slight_smile:

I am starting to use it now, so far the analysis window looks nice, and I really like the little templates (like adding props automatically adds a prop with type validation).

I found this:
http://www.twelvetone.tv/docs/developer-tools/intellij-plugins/intellivue

Any other documentation available?

Thanks :slight_smile:

http://www.twelvetone.tv/docs/developer-tools/intellij-plugins/intellivue is the official site.

You can also post questions here. :slight_smile:

1 Like

I enjoy it, left you a 5-star review on IntelliJ

Thanks! Let us know if you have any feature requests.

We also are testing our ‘Vue inside Java’ technology. That’s what the analyzer uses, and why it is a bit sluggish. We really dislike writing Java UIs in Swing, and now we don’t have to.

1 Like

Would be cool, if when creating a method that has a parameter as input, a variable will be auto-created as well in the method.

I think the name of the variable should be the same as the name of the parameter (wouldn’t cause naming issues since it will not have “this” in the method):

<template>
	<button @click="buttonClicked(myInput)">Button</button>
</template>

User clicks “Create Vue implementation”:

<script>
	...
	methods():{
		buttonClicked(myInput) {
			// Method generated with myInput as an input variable
		}
	}
	...
</script>

This is actually already implemented, so if it is not working we will look into it. :scream:

If you enter

  <button @click="run(foo,bar)"/>

And then put the cursor inside run, then select Create Implementation, the dialog should have the parameters, and the generated method should also have them.

The plugin will recognize it is a method and also preselect ‘Method’ as the type.

It is not detecting <button @click="run('foo','bar')"/> though…

1 Like

I just fixed the string issue (and decimal numbers).

<div @click="ok('a',true,1.2,null,bar)">   
function ok(str1, bool1, num1, obj1, bar) {
}  

Fix will be in RC.13

1 Like

Oh, ok, I see it now, the cursor must be on the name of the method, and not anywhere else (for me the cursor was on the parameter name inside the parenthesis of the method).

It’s working for me, very nice :slight_smile:

Feature request :slight_smile:

When I try to create a method, and the input parameter is an object, the default suggestion is data(), would be nice if it would still be a method:

Generates a method by default:

<template>
<div>
    <button @click="viewProfile(profile)">View Profile</button>
</div>
</template>

Generates a variable in data() by default:

<template>
<div>
    <button @click="viewProfile(profile.id)">View Profile</button>
</div>
</template>

Would be nice if the later would generate a method, something like:

methods(): {
    viewProfile(profileId) {}
}

This indeed does work on the new version. We will be pushing the it to JetBrains tonight or tomorrow.

1 Like

Great thanks, I’ll download it for sure :upside_down_face:

We just posted an update to the plugin.

RC14

  • bugfix: Format change notes

RC13

  • improvement: Rename ‘Reorder Vue Options’ to ‘Sort Vue Options’
  • feature: Detect parameter types in method signature
  • bugfix: Allow quotes in detected method parameters
  • feature: Speed up inserting into script by 400%
  • bugfix: Prevent exception and create block when no element exists
  • feature: Add script block if it does not exist
  • task: Update exception reporting
  • task: Do not use internal JavaFX API
  • task: Internal refactoring
1 Like