Here’s a quick introduction on how to use Wijmo controls in your VueJS applications. As of Build 207, Wijmo officially supports VueJS. Wijmo currently supports Vue 1.x and is working on support for Vue 2.x to be released in the future.

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.

How is Vue different from Angular?

The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible. These goals show clearly when you compare Vue to Angular:

• Vue uses components as its basic building block for building applications. Components are similar to Angular’s “element directives”. Vue also has directives, which are similar to Angular’s “attribute directives”. This clear separation makes it simpler to create and maintain components and directives.
• Vue’s components are easily composable. In fact, Vue applications can be seen as component trees. Components have their own isolated scope, directly accessible as regular properties of the component. This is different from Angular 1.x, where components and controllers are largely independent.
• Vue detects changes to the data through property setters. When changes are detected, Vue triggers DOM updates asynchronously. There are no dirty-checks and no digest cycles. This improves performance, but most importantly it simplifies logic. You don’t need do to anything special to trigger updates after asynchronous operations such as Ajax calls or timeOuts.
• Vue’s HTML markup is very similar to Angular’s, but more consistent. In Vue, regular attributes always represent literal values. Attributes preceded by a colon are “dynamic”, or calculated expressions. And two-way attributes have a “.sync” suffix. This is different from Angular 1.x, where attributes may be literals or expressions, depending on the directive author.

Despite these differences, the markup used in Vue applications is very similar to Angular’s.

For example, here is a simple Vue application that shows Wijmo's Vue DataGrid on the page:

 <!-- Vue application --> 
<div id="app" class="container">
 <p>
  Here's a <b>FlexGrid</b> with auto-generated columns:
 </p>
 <wj-flex-grid
  control="theGrid"
  :items-source="data"
  :items-source-changed="gridItemsChanged"
  :initialized="initGrid">
  <wj-flex-grid-column binding="name" header="Name"></wj-flex-grid-column>
  <wj-flex-grid-column binding="date" header="Date"></wj-flex-grid-column>
  <wj-flex-grid-column binding="sales" header="Sales"></wj-flex-grid-column>
  <wj-flex-grid-column binding="expenses" header="Expenses"></wj-flex-grid-column>
 </wj-flex-grid>
 <p>
  Wijmo components have a "control" pseudo-property that exposes the control 
  instance to the parent component so you can use the control in markup. 
  For example, the grid above has <b>{{ theGrid.rows.length }}</b> rows.
 </p>
</div>

The “app” id marks the first div element as the application’s main component. The component is created explicitly by the application when the page is loaded.

The “wj-flex-grid” element below is a Vue component that wraps a FlexGrid control. The component may contain one or more “wj-flex-grid-column” components that define the columns to be displayed on the grid.

Notice how most of the “wj-flex-grid” attributes are preceded by a colon to indicate they are dynamic rather than literal values. The grid’s “itemsSource” property should be set to the content of the application’s “data” variable, not to the string “data”.

Now compare this to the equivalent Angular 1.x markup:

<!—Angular 1.x application --> 
<div ng-app="app" ng-controller="appCtrl">
  <p>
    Here's a <b>FlexGrid</b> with auto-generated columns:
  </p>
  <wj-flex-grid
    control="theGrid"
    items-source="data"
    items-source-changed="gridItemsChanged(s,e)"
    initialized="initGrid(s,e)">
    <wj-flex-grid-column binding="name" header="Name"></wj-flex-grid-column>
    <wj-flex-grid-column binding="date" header="Date"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sales" header="Sales"></wj-flex-grid-column>
    <wj-flex-grid-column binding="expenses" header="Expenses"></wj-flex-grid-column>
  </wj-flex-grid>
  <p>
    Wijmo components have a "control" pseudo-property that exposes the control 
    instance to the parent component so you can use the control in markup. 
    For example, the grid above has <b>{{ theGrid.rows.length }}</b> rows.
  </p>
</div>

The “ng-app” id marks the first div element as the application’s main component. Its presence bootstraps Angular automatically.

The “wj-flex-grid” element below is an Angular directive that wraps Wijmo's Vue DataGrid control. It may contain one or more “wj-flex-grid-column” directives that define the columns to be displayed on the grid.

In the Angular markup, the attributes don’t have the initial colon. The “itemsSource” attribute knows that its value is dynamic rather than a literal, because that’s what made sense for the directive author.

Also, event handler attributes are specified as function calls rather than just by their names (e.g. “initGrid(s,e)” rather than just “initGrid”. Forgetting to specify the parameters in event handlers is a common source of errors when writing Angular 1.x markup.

Overall, you can see how remarkably similar the markup is between Vue and Angular 1.x applications.

How to use Wijmo in Vue applications

To use Wijmo in your Vue applications, start by adding references to Vue and Wijmo to your page, and then include the “wijmo.vue.js” module which defines components that wrap the Wijmo controls. For example:

<head>
    <title>Wijmo and Vue</title>

    <!-- Vue -->
    <script src="https://npmcdn.com/vue@1.0.25/dist/vue.js"></script>

    <!-- Wijmo -->
    <link href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css" rel="stylesheet"/>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
    <script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>

    <!—Wijmo/Vue interop -->
    <script src="http://cdn.wijmo.com/5.latest/interop/vue/wijmo.vue.min.js"></script>

    <!-- app scripts and styles -->
    <link href="styles/app.css" rel="stylesheet"/>
    <script src="scripts/app.js"></script>
</head>

Now you can use the Wijmo components in your Vue application.

The “wijmo.vue.js” file is included with the Wijmo distribution:

Download Wijmo

You can see it in action in these samples:

• VueJS Interop sample
• VueJS FlexGrid sample
• VueJS FlexChart sample
• VueJS Input sample
• VueJS Gauge sample
• How to Create Great VueJS applications Using Wijmo Controls blog

We want your feedback!

We love Vue, and it is officially supported by Wijmo. The “wijmo.vue.js” file includes the controls available in Wijmo, but some features (like grid cell templates) are missing.

If you have any suggestions or requests, please send us your feedback!

Download Now!