Update guide for Vue GWT 1.0-beta-4

1.0-beta-4.md

If you are using Vue GWT beta-2, please refer to the following guide to update to beta-4. You can also checkout the Vue GWT beta-4 Release note.

Update your pom.xml

GWT 2.8.1

First make sure your project is using at least GWT 2.8.1 as Elemental2 requires it.

Vue GWT dependency

The Annotation processors are not included by default in Vue GWT beta-4. This allows you to include them as an optional dependency.

Change your dependency for Vue GWT in your pom.xml to:

<project>
    <dependencies>
        ...
        <dependency>
            <groupId>com.axellience</groupId>
            <artifactId>vue-gwt</artifactId>
            <version>1.0-beta-4</version>
        </dependency>
        <!-- Annotation Processors for Vue GWT -->
        <dependency>
            <groupId>com.axellience</groupId>
            <artifactId>vue-gwt-processors</artifactId>
            <version>1.0-beta-4</version>
            <optional>true</optional>
        </dependency>
    </dependencies>
</project>

Update your *.gwt.xml

We renamed the GWT module for consistency. The new GWT module is named com.axellience.vuegwt.VueGWT

In your *.gwt.xml, find:

<inherits name='com.axellience.vuegwt.VueGwt'/>

and replace with:

<inherits name='com.axellience.vuegwt.VueGWT'/>

Update your Java classes

Imports

We changed the packages to better match the new Maven module structure. As a consequence Java imports in your VueComponents must be updated.

It can be done simply with a search and replace all in your IDE:

• com.axellience.vuegwt.client -> com.axellience.vuegwt.core.client
• com.axellience.vuegwt.jsr69.component.annotations -> com.axellience.vuegwt.core.annotations.component
• com.axellience.vuegwt.jsr69.directive.annotations -> com.axellience.vuegwt.core.annotations.directive

Usage of JsObject, JsArray and JsTools

We dropped our own JsObject and JsArray implementations in favor of the ones that come with JsInterop base and Elemental2.

You can find help on how to manipulate those new objects on our documentation.

Usage of VueGwtPanel

VueGwtPanel has been renamed to VueGwtWidget for consistency.

Update your HTML templates

Because we migrated from Elemental to Elemental2, NativeEvent has been replaced with Event in the templates.

Search for all references to NativeEvent in your HTML templates and simply replace with Event. Then change in your Component class to take elemental2.dom.Event as parameter in your methods. If you need to access mouse or keyboard information on your Event you can cast it to elemental2.dom.MouseEvent and elemental2.dom.KeyboardEvent respectively. You can find an example of usage in our documentation at "Accessing the Event". If you really need to use NativeEvent you can use Js.cast(myEvent) to cast from Event to NativeEvent.

Maven clean

Finally to make sure that everything is up-to-date run mvn clean on your project.

You are having an issue?

If you have any issue updating, feel free to contact us on our Gitter. If you find a bug, please open an issue on GitHub.