Vue GWT Demo

This demo page displays some demos made with Vue GWT. Vue GWT integrates Vue.js with GWT 2.8 using JsInterop.

To get more details and get started take a look at our Documentation.

Counter Component

Vue GWT let you write Vue.js with Java controllers. Below you will see a simple example. Try clicking on the buttons to see the reactions.

<div>
	<button class="btn orange" @click="counterValue++">
		Press me!
	</button>
	<button class="btn grey" @click="counterValue = 0">
		Reset
	</button>
	<p>
		You pressed {{ counterValue }} times
	</p>
</div>
@Component
public class CounterComponent implements IsVueComponent {
    @Data int counterValue = 0;
}

Todo List component

This example is mandatory when showing a new front-end framework, so here is a Todo List written with Vue GWT.
This Todo list is composed of 2 Components: TodoListComponent that manage the list of todos and TodoComponent that displays a single Todo.

TodoListComponent
<vue-gwt:import class="com.axellience.vuegwtdemo.client.components.todolist.Todo"/>
<div class="row">
    <div class="col s12">
        <input type="text"
               v-model="newTodoText"
               @keypress.enter="addTodo"/>
    </div>
    <div class="col s12">
        <button class="btn red"
                @click="clearTodos"
                v-show="todos != null && !todos.isEmpty()">
            Clear All
        </button>
        <button class="btn orange"
                @click="clearDoneTodos"
                v-show="doneTodos > 0">
            Clear Done
        </button>
    </div>
    <div class="col s12" v-for="Todo todo in todos">
        <todo v-bind:todo="todo" @removeTodo="removeTodo"/>
    </div>
</div>
/**
 * A simple Todo list.
 * Is able to list some todo, mark them as done, remove done todos or all at the same time.
 */
@Component(components = { TodoComponent.class })
public class TodoListComponent implements IsVueComponent {
    @Data @JsProperty List todos = new LinkedList<>();
    @Data String newTodoText = "";

    @JsMethod
    public void addTodo() {
        this.todos.add(new Todo(this.newTodoText));
        this.newTodoText = "";
    }

    @JsMethod
    public void removeTodo(Todo todo) {
        this.todos.remove(todo);
    }

    @JsMethod
    public void clearTodos() {
        this.todos.clear();
    }

    @JsMethod
    public void clearDoneTodos() {
        this.todos =
            this.todos.stream().filter(todo -> !todo.isDone()).collect(Collectors.toList());
    }

    @Computed
    public long getDoneTodos() {
        if (this.todos == null)
            return 0;

        return this.todos.stream().filter(Todo::isDone).count();
    }
}
TodoComponent
<div>
    <p v-bind:class='map("isDone", todo.isDone())'>
        <input type="checkbox"
               v-model="isDoneTodo"
               v-bind:id="_uid"/>
        <label v-bind:for="_uid">{{ todo.getText() }}</label>

        <button class="btn red right" @click="removeTodo">
            <i class="material-icons">delete</i>
        </button>
    </p>
</div>
@Component
public class TodoComponent implements IsVueComponent {
    @Prop Todo todo;

    /**
     * Emit an event when we want to delete the todo
     */
    @JsMethod
    public void removeTodo() {
        vue().$emit("removeTodo", todo);
    }

    @Computed
    public boolean getIsTodoDone() {
        return this.todo.isDone();
    }

    @Computed
    public void setIsTodoDone(boolean isDone) {
        this.todo.setDone(isDone);
    }
}
public class Todo {
    private String text;
    private boolean isDone;

    public Todo(String text) {
        this.text = text;
        this.isDone = false;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

    public boolean isDone() {
        return isDone;
    }

    public void setDone(boolean done) {
        isDone = done;
    }
}

Backward compatibility with GWT User

To avoid having to rewrite your whole application, you can easily instantiate Vue GWT components in a GWT user Widget. This let you write some part of you app as Vue GWT components and attach them to your current application. When you decide rewrite more of your application, you can just use these components in your Vue App without having to rewrite anything.
This is method is used for the todo list component above. You can see the Java code to instantiate and attach the component bellow:

                VueGwtWidget vueGwtWidget = new VueGwtWidget(TodoListComponentFactory.get());
RootPanel.get("todoListComponentContainer").add(vueGwtWidget);