Skip to content
A JsInterop wrapper for Vue Router to use in Vue GWT. Developed at
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Vue Router GWT

A JsInterop wrapper for Vue Router to use in Vue GWT.

This wrapper allows you to use Vue Router in Vue GWT apps.

How to Set It Up

Make sure you have set up your Vue GWT project.

Then follow these steps:

Add the Maven Dependency


Add the GWT dependency

Add this in your app .gwt.xml file:

<inherits name='com.axellience.vueroutergwt.VueRouterGwt'/>

Call VueRouter.init()

This will inject the javascript of VueRouter in your page. You should do it right under your Vue.init().


If you already have the VueRouter javascript included in your page by another way, you don't have to call VueRouter.init().

How to Use It

Let's see a simple example. We have an application with a RootComponent and we want to set up routing for two Components: FooComponent and BarComponent.

Foo and Bar Components


public class FooComponent implements IsVueComponent {
<div>Hello from Foo!</div>


public class BarComponent implements IsVueComponent {
<div>Hello from Bar!</div>


Ok this Component is going to be a little more interesting.

    <h1>Hello App!</h1>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>

router-link Components above in the template will be replaced by a elements at runtime. router-view will contain the Component for the active route (either FooComponent or BarComponent).

Let's see how we declare our routes:

// First, we declare a class to configure the routing and register it on some component options
public class RoutesConfig implements CustomizeOptions {
    public void customizeOptions(VueComponentOptions vueComponentOptions)
        // We first create an object to hold our Router options
        RouterOptions routerOptions = new RouterOptions();
        // We add the routes to our options by passing
        // their path and the Constructor of the Component we want to display on them
            .addRoute("/foo", FooComponentFactory.get())
            .addRoute("/bar", BarComponentFactory.get());

        // We the create our router
        VueRouter vueRouter = new VueRouter(routerOptions);
        // And set it on our Component options
        vueComponentOptions.set("router", vueRouter);
// Then we bind this class to our RootComponent so it customize it's options
@Component(customizeOptions = RoutesConfig.class)
public class RootComponent implements IsVueComponent {

Easy, right?

If you want more documentation on the API you can checkout the official Vue Router documentation.

Who Made This?

Vue GWT is developed by the awesome people at

You can’t perform that action at this time.