Wijmo Vue logo

Wijmo and Vue

Vue is a JavaScript application framework similar to Angular and React, but simpler and lighter. Vue 1.0.25 is less than 80k of minified JavaScript. Angular 1.5.6 and React 15.1.0 are both about 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:

The Wijmo Vue components expose a "control" pseudo-property that exposes the control instance to the parent component. This allows you to use the control in your markup. For example, the grid above has {{ theGrid.rows.length }} rows.

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.

The selectionMode property of the chart is set to "Point", so you when you click a point on the chart it will select the corresponding item.

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:

Name:
Sales:
Date/Time:
DateTime: