vuegwt / vue-gwt Goto Github PK

Web Component support in Vue GWT is based on vue-custom-element.
There is now an official Wrapper from the Vue team: vue-web-component-wrapper.

We should update Vue GWT to use this one as it will be supported in the future.

In my component I have:

@JsProperty @Prop boolean important;

Then in template I'm doing quite often mistake - missing value between quotes:

:important=""

I'm getting error, which is good, but it's not informative:
"SyntaxError: Unexpected token ,"

Uncaught SyntaxError: Unexpected token ,
    at new Function (<anonymous>)
    at $initRenderFunctions_0_g$ (VueComponentOptions.java:109)
    at $setComponentTemplate_0_g$ (VueComponentOptions.java:75)
    at getOptions_5_g$ (MyButtonJsType.java:30)
    at MyButtonFactory_1_g$.init_15_g$ [as init_12_g$] (MyButtonFactory.java:27)
    at get_83_g$ (MyButtonFactory.java:37)
    at lambda$1_33_g$ (MyButtonJsType.java:15)
    at MyButtonJsType$lambda$1$Type_1_g$.get_85_g$ [as get_72_g$] (MyButtonJsType.java:15)
    at getFactory_1_g$ (VueGWT.java:112)
    at getFactory_0_g$ (VueGWT.java:100)
    at new VueGwtWidget_3_g$ (VueGwtWidget.java:35)

Would be nice to have it improved to better explain the error.

"gwt" does makes most developers sad, it sounds old and outdated.
don't get me wrong I like gwt a lot, but it just does not sell...to developers/management
basically you are using only gwtc which could be j2cl in the future.
both are transpilers to get from java to js
the project is not using most of the stuff gwt is known for anyways like the components
please drop "gwt" from the title

How can i catch events from vue js components in java ?
for example i have vue plugin :
remove: function(obj) {
this.$emit('delete', obj)
obj.delete();
}

And i want catch the delete event in Java.

I tried to make a simple application by documentation and I got error:
Uncaught Error: java.lang.RuntimeException: Couldn't find VueFactory for Component:

Also I was change net.ltgt.gwt.maven plugin version from 1.0-rc-6 to 1.0-rc-8 because with
1.0-rc-6 I got error: ServletContainerInitializers: detected. Class hierarchy: empty
and many ClassNotFoundException .

I was try "Vue GWT Demo" project and got same error: java.lang.RuntimeException: "Couldn't find VueFactory for Component"

I was also try with -generateJsInteropExports parameter and "mvn clean" in eclipse.

Full error:

Uncaught Error: java.lang.RuntimeException: Couldn't find VueFactory for Component: 
hr.ja.client.SimpleLinkComponent. Make sure that annotation are being processed, and that you added the -generateJsInteropExports flag to GWT. You can also try a "mvn clean" on your maven project.
 at iA_g$.Dz_g$ [as createError_0_g$] (Throwable.java:121)
    at iA_g$.Nz_g$ [as initializeBackingError_0_g$] (Throwable.java:113)
    at iA_g$.wz_g$ (Throwable.java:67)
    at iA_g$.aA_g$ (Exception.java:29)
    at new iA_g$ (RuntimeException.java:29)
    at xff_g$ (VueGWT.java:136)
    at wff_g$ (VueGWT.java:119)
    at vff_g$ (VueGWT.java:102)
    at mff_g$ (Vue.java:39)
    at _Fd_g$.aGd_g$ [as onModuleLoad_0_g$] (GWTvue.java:17)
    at Array.Owc_g$ (hr_00046ja_00046GWTvue__EntryMethodHolder.java:3)
    at initializeModules_0_g$ (ModuleUtils.java:44)
    at sI_g$ (Impl.java:239)
    at vI_g$ (Impl.java:298)
    at Impl.java:77
    at fwc_g$ (ModuleUtils.java:55)
    at String.java:836
Dz_g$ @ Throwable.java:121
Nz_g$ @ Throwable.java:113
wz_g$ @ Throwable.java:67
aA_g$ @ Exception.java:29
iA_g$ @ RuntimeException.java:29
xff_g$ @ VueGWT.java:136
wff_g$ @ VueGWT.java:119
vff_g$ @ VueGWT.java:102
mff_g$ @ Vue.java:39
aGd_g$ @ GWTvue.java:17
Owc_g$ @ hr_00046ja_00046GWTvue__EntryMethodHolder.java:3
initializeModules_0_g$ @ ModuleUtils.java:44
sI_g$ @ Impl.java:239
vI_g$ @ Impl.java:298
(anonymous) @ Impl.java:77
fwc_g$ @ ModuleUtils.java:55
(anonymous) @ String.java:836

import com.axellience.vuegwt.client.VueComponent;
import com.axellience.vuegwt.jsr69.annotations.Component;
import jsinterop.annotations.JsType;

@Component
@JsType
public class RootComponent extends VueComponent
{
    public String message = "Hello Vue GWT!";
}

Throwable.java:121 Uncaught Error: java.lang.RuntimeException: Couldn't find the given Component nile.woimg.client.RootComponent. Are you sure annotations are being processed?
at Hh_g$.ah_g$ [as createError_0_g$] (Throwable.java:121)
at Hh_g$.kh_g$ [as initializeBackingError_0_g$] (Throwable.java:113)
at Hh_g$.Vg_g$ (Throwable.java:67)
at Hh_g$.zh_g$ (Exception.java:29)
at Hh_g$ (RuntimeException.java:29)
at Ubd_g$ (VueComponentDefinitionCache.java:34)
at xcd_g$ (Vue.java:34)
at g1c_g$.h1c_g$ [as onModuleLoad_0_g$] (Front.java:15)
at Array.Yqb_g$ (nile_00046woimg_00046Front__EntryMethodHolder.java:3)
at initializeModules_0_g$ (ModuleUtils.java:44)
at Dp_g$ (Impl.java:239)
at Gp_g$ (Impl.java:298)
at Impl.java:77
at qqb_g$ (ModuleUtils.java:55)
at RootComponent.java:9

Example:

<style lang="scss" scoped>
  /* SASS styling here */
</style>

If a child component is inserted using the is attribute its @Prop bindings are not validated.
For example, this error won't be caught at compile time:

<div is="my-todo" :todo="user"/>

Another problem is property binding is not checked when using camelCase properties instead of the kebab case version.
This also won't be caught at compile time:

<my-todo :todoItem="user"/>

Thanks for creating this project! I am trying to add vue-gwt to an existing project I have in IntelliJ and superdevmode is working great 👍

But when I try to compile to a war using the gwt compiler I get the following errors:

 [ERROR] Errors in 'jar:file:/Users/abm/UddataPlus/portal/lib/vue-gwt-1.0-beta-9.jar!/com/axellience/vuegwt/core/client/component/options/VueComponentOptions.java'
      [ERROR] Line 43: No source code is available for type javax.inject.Provider<T>; did you forget to inherit a required module?
   Tracing compile failure path for type 'com.axellience.vuegwt.core.client.component.options.VueComponentOptions'
      [ERROR] Errors in 'jar:file:/Users/abm/UddataPlus/portal/lib/vue-gwt-1.0-beta-9.jar!/com/axellience/vuegwt/core/client/component/options/VueComponentOptions.java'
         [ERROR] Line 43: No source code is available for type javax.inject.Provider<T>; did you forget to inherit a required module?
      [ERROR] Errors in 'jar:file:/Users/abm/UddataPlus/portal/lib/vue-gwt-1.0-beta-9.jar!/com/axellience/vuegwt/core/client/directive/options/VueDirectiveOptions.java'
         [ERROR] com.axellience.vuegwt.core.client.directive.VueDirective cannot be resolved to a type
      [ERROR] Errors in 'jar:file:/Users/abm/UddataPlus/portal/lib/vue-gwt-1.0-beta-9.jar!/com/axellience/vuegwt/core/client/component/IsVueComponent.java'
         [ERROR] com.axellience.vuegwt.core.client.component.VueComponent cannot be resolved to a type
      [ERROR] Errors in 'jar:file:/Users/abm/UddataPlus/portal/lib/vue-gwt-1.0-beta-9.jar!/com/axellience/vuegwt/core/client/directive/VueDirective.java'
         [ERROR] com.axellience.vuegwt.core.client.vnode.VNode cannot be resolved to a type
      [ERROR] Errors in 'jar:file:/Users/abm/UddataPlus/portal/lib/vue-gwt-1.0-beta-9.jar!/com/axellience/vuegwt/core/client/component/VueComponent.java'
         [ERROR] com.axellience.vuegwt.core.client.component.options.VueComponentOptions cannot be resolved to a type
      [ERROR] Errors in 'jar:file:/Users/abm/UddataPlus/portal/lib/vue-gwt-1.0-beta-9.jar!/com/axellience/vuegwt/core/client/vnode/VNode.java'
         [ERROR] com.axellience.vuegwt.core.client.component.IsVueComponent cannot be resolved to a type

I have included all transitive dependencies with the library. I am not sure how to move forward and get a build working.

Scoped slots are pretty important for compatibility with existing Vue library such as Vue Material.

It would be great be to also support some basic destructuring.

When an loop variable is used multiple time in the same expression, it leads to an invalid method being generated.

For example:

<ul>
  <li v-for="User user in users" v-if="user.isValid() && user.isActive()">
    {{ user.getName() }}
  </li>
</ul>

In this case, the generated Java method for expression user.isValid() && user.isActive() will be:

public boolean exp$2(User user, User user) {
  return user.isValid() && user.isActive();
}

The parameter user should only be present once.

When importing a component in another using the components attribute of the @Component annotation, if the imported class doesn't have the Component annotation then the Annotation Processor crashes with an NPE instead of throwing an explicit exception.

Not sure it's even possible, but would be nice to have. First the code:

public enum JqmButtonSize {
    SMALL("sm"), LARGE("lg");

    private final String bsSize;

    private JqmButtonSize(String bsSize) {
        this.bsSize = bsSize;
    }

    @JsMethod public String getBsSize() {
        return bsSize;
    }
}

@Component
public class JqmButton extends VueComponent {
    @Prop @JsProperty JqmButtonSize size;

    @Computed public String getCalcSize() {
        return size != null ? size.getBsSize() : "";
    }
}

And then it's used like:

<vue-gwt:import class="com.vx.JqmButtonSize" />
<jqm-button variant="primary" :size="JqmButtonSize.LARGE">Abc</jqm-button>

Probably there is a way to eliminate a need for manual vue-gwt:import, but anyway it works.
Then let's pretend we did some mistakes in template.
In case :size="aaa" we are getting error "Couldn't find variable/method "aaa" in the Component." during compile time, which is good.
But in case :size="222" we are not getting any error during compile time, but getting it in runtime, like "[Vue warn]: Error in render: "TypeError: this.size.getBsSize is not a function", which is too late and not very informative. IMO it would be nice to improve template generator to catch as much as possible Java types errors during compile time.

A bug in Vue GWT template processor generator makes it fail if the component has static render function generated by Vue.js.

With J2CL when extending a class with the @JsType annotation, then the child class must have a constructor annotated with @JsConstructor.

Currently, Components are extending VueComponent (which is a native @JsType), so they would need a @JsConstructor to compile in J2CL.
To avoid needing to create this constructor in each Component, I propose to introduce an interface that Components implement instead of extending VueComponent.

This interface would look like this:

public interface IsVueComponent {
   default VueComponent asVue() {
      return Js.cast(this);
   }
}

This would make all Vue.js Components methods (like $emit) or properties (like $el) accessible in Components this way instead of directly on this:

asVue().$emit("my-event");

This also open up the possibility of adding more idiomatic methods as default in this interface to access attributes/elements on the Component.

Even if this is a pretty big breaking change, the migration from Beta 7 should be fairly easy as it would just require replacing all extends VueComponent with implements IsVueComponent.

Feedback on the name of this interface (IsVueComponent) and this idea is welcome!

Vue GWT uses the greap JSoup project to parse HTML templates at compile time.
JSoup is very strict about the HTML syntax and implement a behavior similar to browsers.
In case of invalid HTML, the elements are just ignored.

This mean that this template:

<table>
    <tr>
        <my-component/>
    </tr>
</table>

Will be end up in this DOM tree at compile time (my-component element is dropped):

<table>
    <tr></tr>
</table>

JSoup doesn't seem to support a mode to allow invalid HTML, this mean that we either have to use another library, or fork JSoup and change it to allow this.

The new library should support the following:

• Keep invalid HTML element when parsing
• Support case on attribute name
• Support modifying the DOM tree
• Support reexporting the DOM tree to HTML

For now a workaround to this is to use the is attribute from Vue.js that exists to go around this issue in browsers:

<table>
    <tr>
        <td is="my-component"/>
    </tr>
</table>

Currently, if I have broken html template, "GWT Compile" passed just fine, without any errors. Then I run superdev mode on jetty and getting error only when code server starts compiling of my project. That's ok, but would be nice to get errors during "GWT Compile" stage.

https://vuegwt.github.io/vue-gwt/guide/getting-started.html#your-first-component

general java program right Right click in Main function can show ‘run’ prompt。

but ‘Your First Component # Simple Link Component’ not have Main function so，how to run this demo program

https://github.com/Axellience/vue-gwt/blob/master/src/main/resources/com/axellience/vuegwt/client/jsnative/VueGwtTools.js#L24
is the culprit.
Checking for property '$$el' explicitly fails as super-dev appends the build increment (for example '$$el_0_g$')

Suggestion would be to pass isComponent in from GWT.

Hi all,
Is it possible to write eclipse plugin using vue-gwt? for example, embed a browser to eclipse then the plugin (using vue-gwt) can be display on that browser.
Thank you!

Speudo-classes don't work in scoped style section.

For example:

<style scoped>
	.test:after {
		color:   red;
	}
</style>

Will produce .test:after[data-v-...]{color: red} instead of .test[data-v-...]:after{color: red}

The same way as implemented in https://github.com/kaorun343/vue-property-decorator

Any ideas/thoughts on whether or not the toolkit could be used in a Gradle build environment instead of Maven?

Put another way, is there anything inherent in it that depends on using Maven?

Thanks

Current vue version is 2.5.2.
Is there any proper way how to configure vue-gwt to use newer version of vue, or it's supposed to be always hardcoded in vue-gwt? Then when to expect new release of vue-gwt based on 2.5.2 ? It would be nice to have vue dependency configurable, for example loaded manually in index.html

Improve vue-gwt by supporting the .sync feature like it's written in
https://vuegwt.github.io/vue-gwt/guide/essentials/components.html#sync-modifier :)

When using a char[] in a template the output is not correctly converted to String.

For example this:

<div>{{ myCharArray }}</div>

@JsProperty char[] charArrayData = new char[]{'a', 'b', 'c'};

Is rendered to 97,98,99 instead of abc

When removing a VueGwtPanel from another panel:
containerPanel.remove(vuePanel);

We got this error: Cannot read property 'removeChild' of null

A workaround can be to add the VueGwtPanel in a SimplePanel to be able to remove it.
containerPanel.add(new SimplePanel(vuePanel));
Then we can do:
containerPanel.clear();

If an @Inject property has the same name as a computed property then the injection breaks for that property.

For example:

@Inject
TreeController treeController;

@Computed
public TreeController getTreeController() {
    return treeController;
}

The problem comes from the Component generated JsType. It in inherits from the Component Class and adds attributes for Computed properties.

It also adds a method to deal with injection. In this method the following code gets generated to copy injected properties on the Component instance at runtime:

treeController = dependencies.treeController;

But we should actually generate this, in case a computed property with the same name masks this attribute:

super.treeController = dependencies.treeController;

This masking can occur because non JsInterop properties on the Component class get minified whereas name of properties in the JsType are kept. Therefore they are different at runtime.

When using:

myList.set(1, newValue);

on a Java List Vue.js observers are not triggered. Some wrapping is missing.

the packaging value for the module vue-gwt-processors is "jar" (https://search.maven.org/remotecontent?filepath=com/axellience/vue-gwt-processors/1.0-beta-6/vue-gwt-processors-1.0-beta-6.pom)

Unfortunately the value is "gwt-lib" for the modules vue-gwt and vue-gwt-core (https://search.maven.org/remotecontent?filepath=com/axellience/vue-gwt/1.0-beta-6/vue-gwt-1.0-beta-6.pom, https://search.maven.org/remotecontent?filepath=com/axellience/vue-gwt-core/1.0-beta-6/vue-gwt-core-1.0-beta-6.pom). It causes resolve tasks to fail when working with apache ivy.

It would be nice to rename it to "jar" too

Static imports are supported in the Template Parser Context however there is no way for the user to use them for now (they are only used internally to expose various static java methods).

It would be nice to be able to do:

<vue-gwt:import static="com.axellience.MyClass.STATIC_FIELD"/>
<vue-gwt:import static="com.axellience.MyClass.staticMethod"/>

This would expose STATIC_FIELD and staticMethod in the template.

This could be useful when configuration static properties must be used in the template (dimensions, color values...), or to use static util methods in the templates.

I'm testing vue-gwt with very simple test case.
And there are some strange things I cannot figure out.

@Component
public class BoilingVerdict extends VueComponent {
    @Prop @JsProperty String celsius;

    @JsMethod double parseFloat(String value) {
        if (value == null) return 0;
        String s = value.trim();
        if (s.isEmpty()) return 0;
        try {
            return Double.parseDouble(s);
        } catch (Exception e) {
            return 0;
        }
    }
}

BoilingVerdict.html

<p v-if="parseFloat(celsius) >= 100">The water would boil.</p>
<p v-else>The water would not boil.</p>

@Component
public class TemperatureInput extends VueComponent {
    @Prop @JsProperty String value;
    @Prop @JsProperty String scale;

    private static final Map<String, String> scaleNames = new HashMap<String, String>() {{
        put("c", "Celsius");
        put("f", "Fahrenheit");
    }};

    @Computed public void setVal(String val) {
        this.$emit("input", val);
    }

    @Computed public String getVal() {
        return value;
    }

    @Computed public String getScaleName() {
      return scaleNames.get(scale);
    }
}

TemperatureInput.html

<fieldset>
  <legend>Enter temperature in {{scaleName}}:</legend>
  <input v-model="val" />
</fieldset>

@Component(components = { BoilingVerdict.class, TemperatureInput.class })
public class TemperatureCalc extends VueComponent {

    @JsProperty String temperature = "";
    @JsProperty String scale = "c";

    private static final Function<Double, Double> toCelsius = fahrenheit -> (fahrenheit - 32) * 5 / 9;
    private static final Function<Double, Double> toFahrenheit = celsius -> (celsius * 9 / 5) + 32;

    private static String tryConvert(String temperature, Function<Double, Double> convert) {
      if (temperature == null || temperature.isEmpty()) return "";
      try {
        double input = Double.parseDouble(temperature);
        double output = convert.apply(input);
        double rounded = Math.round(output * 1000) / 1000;
        return String.valueOf(rounded);
      } catch (Exception e) {
          return "";
      }
    }

    @Computed public String getCelsius() {
        return "f".equals(scale) ? tryConvert(temperature, toCelsius) : temperature;
    }

    @Computed public void setCelsius(String value) {
      scale = "c";
      temperature = value;
    }

    @Computed public String getFahrenheit() {
        return "c".equals(scale) ? tryConvert(temperature, toFahrenheit) : temperature;
    }

    @Computed public void setFahrenheit(String value) {
        scale = "f";
        temperature = value;
    }
}

TemperatureCalc.html

<div>
  <div>
    <TemperatureInput scale="c" v-model="celsius" />
  </div>
  <div>
    <TemperatureInput scale="f" v-model="fahrenheit" />
  </div>
  <div>
    <BoilingVerdict :celsius="celsius" />
  </div>
</div>

First question: Why I have to put every child component to separate div?

In app class I have the following code:

    Vue.component("TemperatureInput", TemperatureInput.class);
    Vue.component("BoilingVerdict", BoilingVerdict.class);
    Vue.component("TemperatureCalc", TemperatureCalc.class);
    Vue.attach("#temperatureCalcContainer", TemperatureCalc.class);

Second question: Why I have to register all components manually?

Because in VueComponent $props is declared as private, and $props() is not @JsMethod, template compilation fails.

See (just for reference): vuejs/vue#5606

When using a JsProperty of type array (for example Todo[]), the template compiler throws an error.

Hi, Vue 3 support. It is in Release candidate 11. Do you plan this? Any plans/schedules?

MyComponent.html -> template (already implemented).
MyComponent.css -> style for component (scoped style support is nice to have as well)

To improve the future compatibility with GWT 3, Vue GWT should be split in Maven modules.
This has been proposed by Colin Alworth on gitter.
The idea would be to extract some features in modules:

• The Annotations and Interfaces (used for processing) in an API module
• The Annotation processors in a processors module

Users of the library would then depend on Vue GWT (that would depend on the API module). They would also depend on the processors module with optional=true to avoid including these classes in their final build.

It would be nice to mention in documentation that validator method should return boolean, i.e.

@PropValidator(propertyName = "size")
boolean sizeValidator(String value) {
    return "large".equals(value) || "small".equals(value);
}

Also declare propertyName as default, so it would be possible to use

@PropValidator("size") 

When using a Component recursively in it's own template, property binding check (for type/required properties) are not done.
For example with this recursive MyRecursiveComponent.html template:

<div>
  <my-recursive/>
</div>

And this MyRecursiveComponent.java:

@Component(name = "my-recursive")
public class MyRecursiveComponent extends VueComponent {
    @Prop(required = true)
    @JsProperty
    RecursiveData data;
}

We would expect to get a compilation error (missing the required property data on my-recursive). Currently, no error is thrown.

Integration tests fails on Windows because it uses different kind of line breaks than UNIX systems.

Actual error is confusing:

i want integrate the framwork in an existing gwt app, but always in mvn install step i receive the error

[ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.3:compile (default-compile) on project vuegwtmariaexample: Fatal error compiling: java.lang.NoClassDefFoundError: io/bit3/jsass/CompilationException: io.bit3.jsass.CompilationException

also the annotation processor not generate the classes in target/generated-sources/... for examples from the examples of getting started:
LinkComponentExposedType

hi all , with gwt what library suggest to use?

When using $emit primitive types end up boxed.
For example let say we have a child component emitting an event event:

int myValue = 10;
this.$emit("event", myValue);

We then bind the event in the parent template:

<child-component @event="doSomething"/>

@JsMethod
public void doSomething(int myValue) {
    int result = myValue + 5; // This will break!
}

This would break at runtime. The reason is that $emit signature is this:

public native void $emit(String name, Object... param);

This mean that all the primitives passed to it are automatically boxed, so the correct method doSomething should be:

@JsMethod
public void doSomething(Integer myValue) {
    int result = myValue + 5; // This will work
}

This is an issue because we can see $emit as a glue between the child and the parent, this glue shouldn't change the type of the things you pass. Also developers are much more used to work with the primitives type than their boxed equivalent, so forcing to use the boxed version with $emit is not friendly for the users.

To fix the issue, we can simply use the annotation @DoNotAutobox from JsInterop to avoid auto boxing of the parameters passed to $emit. Primitives will then not be boxed when passed.
This will break code that already expects $emit to box the values, but this is worth it as it makes for a saner behaviour for the future.

In VueJs, we can declare a boolean prop and write in a HTML template :
<my-component booleanProp/>

The prop will be true if present and false if absent.
But when I try to use this syntax with VueGwt, I get this error:
Error: (X,X) java: In MyComponent.html at line XX: Passing a String to a non String Prop: "XXX". If you want to pass a boolean or an int you should use v-bind. For example: v-bind:my-prop="12" (or using the short syntax, :my-prop="12") instead of my-prop="12".

When using v-for range like this: v-for="n in 10" it's not possible to use anything else than a number.
For example this is not supported v-for="n in getValue()" where getValue() returns an int.

Vue.js supports it, so it would be nice to support it too.

Nashorn engine has been deprecated as from JDK11, and is removed in JDK12.
We should find a solution to replace it.
Either using GraalVM: https://github.com/graalvm/graal-js-jdk11-maven-demo
Or Rhino: https://github.com/mozilla/rhino

Is there a way to parse .vue files? While exploring the project , i noticed there are a lot of parser classes within the project (TemplateParser being one). I wanted to know if it is possible to parse a vue file ,i.e make an AST or go over file token by token?

When registering a local component using the components attribute of the @Component annotation the ClassName of the imported component is used even if that component has it's name attribute set in it's @Component annotation.
The name attribute should always be taken into account when present.

I've read https://axellience.github.io/vue-gwt/advanced/integrating-with-js-components.html#using-js-components-in-java
But still cannot figure it out how to use existing Vue components from vue-gwt :-(

I'm trying to use https://bootstrap-vue.js.org/
In my index.html I've loaded vue and bootstrap-vue like: https://bootstrap-vue.js.org/docs#browser
Then in Java code I'm using VueGWT.initWithoutVueLib();
And trying to use some components in my components' templates, like:

<b-button :variant="warning"></b-button>

Obviously I have to use JsComponent annotation to make it working, but I cannot figure it out, tried something like:

@JsComponent("bButton") // tried: Vue.bButton, b-button, Vue.b-button
@JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "Object")
public class BButton extends VueComponent {
}

Perhaps namespace or name in JsType should be something different, but I'm lost.