Vue GWT Demo

<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;
}

<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();
    }
}

<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;
    }
}