# 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 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.

### 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: |

### 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):

#### Edit Item

Name
Date
Sales
Expenses