Wijmo Vue logo

Wijmo and Vue 2

Vue is a JavaScript application framework similar to Angular and React, but simpler and lighter. Vue 2.0 is about 60k of minified JavaScript. Angular 1.5.6 and React 15.1.0 are both over twice that size.

Despite its tiny footprint, Vue is very powerful and flexible. You can see how it compares with some other popular JavaScript frameworks here.

Wijmo is also compact, powerful and flexible. The two libraries are a great match. You can read more about Wijmo 5 here.

This sample shows how you can easily encapsulate Wijmo controls into Vue components. It has a main component that contains some random data, and several Wijmo controls all bound to the same data. If you use any control to modify the data, the changes are automatically reflected on all other controls on the page.

FlexGrid

Let's begin by showing some data on an editable FlexGrid control:

FlexChart

Next, let's show the same data as a chart using the FlexChart control:

The chart is bound to the same CollectionView as the grid, so if you edit or sort the data on the grid, the changes will be automatically be reflected on the chart.

Gauges

Here's two gauges bound to the current customer's sales. You can use the gauges to see and also to edit the sales amount.

Input Controls

This section shows several input controls bound to the current item's properties:

Modal Popup and Labeled Inputs

This section shows a modal popup containing input controls with floating labels (inspired by the Material Design Lite CSS library):