JarCastingVue 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:
<project>
<dependencies>
...
<dependency>
<groupId>com.axellience</groupId>
<artifactId>vue-router-gwt</artifactId>
<version>1.0.0</version>
</dependency>
</dependencies>
</project>
Add this in your app .gwt.xml file:
<inherits name='com.axellience.vueroutergwt.VueRouterGwt'/>
This will inject the javascript of VueRouter in your page. You should do it right under your Vue.init().
VueGWT.init();
VueRouter.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
FooComponent
@Component
public class FooComponent implements IsVueComponent {
}
<div>Hello from Foo!</div>
BarComponent
@Component
public class BarComponent implements IsVueComponent {
}
<div>Hello from Bar!</div>
RootComponent
Ok this Component is going to be a little more interesting.
<div>
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
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 {
@Override
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
routerOptions
.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
