Menu hamburger icon

Onsen UI with Vue 2 will soon be possible!

Onsen UI and Vue.js

Vue.js is a lightweight library used to create user interfaces. Its powerful but still intuitive API makes it very easy to learn. Vue has long been a favorite for us in the Onsen UI team and we know that some of our users are already creating apps using Vue and Onsen UI. We are happy to announce that we are currently working on adding better support.

Vue 2 was recently released and it looks very good. The API for creating components will stay almost the same as in the previous version, which makes migration very easy, but internally a lot of changes has been made to make the library more efficient.

Previously we released a small library to make it easier to develop apps with Onsen UI and Vue 1. Since we believe that Vue 2 will gradually replace v1, we are currently focusing our efforts on creating a library for Vue 2 instead.

Vue 2 vs. Vue 1

As mentioned earlier the API has not changed much from v1 to v2. Creating a component in the latest version is very similar to how it is done in v1 but the names of some of the life-cycle callbacks have changed.

Also, Vue 2 is using virtual DOM to speed up rendering and re-rerendering the view. In the diagrams below we can see how the Vue 2 lifecycle is different.

Vue 1 and 2 lifecyle

As we can see some callbacks have been removed and a few have been added.

The beforeCompile and compiled attributes don’t exist in the new version so components that were using those need to be rewritten. Another thing worth to mention is that the $compile function has also been removed so there is no way to manually compile the DOM.

Also, there are two new callbacks that deal with Virtual DOM updates: beforeUpdate and updated.

For people who are familiar with React, the callbacks in v2 should be easy to understand. The naming convention is different which makes the callback names shorter than the React equivalents.

In general, I believe that migrating to v2 is a very simple task.

Vue and Web Components

Onsen UI is created using the Custom Elements v1 API. It’s a simple technology that is used for creating reusable UI components and extend the HTML vocabulary with new tag names.

Since our goal is for Onsen UI to be usable with any frontend library or framework, we need to be careful that we implement all our components in a way that makes them robust and that they can handle being rendered in several different ways since the rendering engine is slightly different for all frameworks.

Vue works very well with Web Components, especially components that are rendered at the leaves of the tree such as buttons, input elements. Basically all components that don’t contain any content of their own.

For components such as the <ons-navigator> which provides stack navigation and dialogs we need to implement some bindings to make them easy to work with in Vue while all other components should be usable as is.

The following Vue template uses the <ons-input> tag to render Material Design input elements, the value can be bound to a variable without writing any binding code:

    <ons-input :value="name" @input="onNameChange" modifier="material" placeholder="Name" float></ons-input>
    <ons-input type="number" min="0" :value="age" @input="onAgeChange" modifier="material" placeholder="Name" float></ons-input>
    Your name is {{ name || 'unknown' }} and you are {{ age }} years old.

When we run the code we get the following result:

See the Pen Vue 2 and Onsen UI 2 by Andreas Argelius (@argelius) on CodePen.

We are currently working on making all the Onsen UI components robust so they can be rendered correctly by Vue. The next step will be to write a binding library that integrates well with navigation components such as <ons-navigator>, <ons-tabbar>, <ons-splitter> and our dialog components.

We need your help!

We are just getting started developing bindings for Vue 2. If you have any requests for how the two libraries should be integrated and what APIs should be available to the developer, let’s discuss in our Gitter channel. We are also looking for people who are experienced Vue developers that would like to contribute to the project with their expertise.

The development will take place in our GitHub repo. Feel free to contribute code and ideas.