In this series, we'll show how you can use Wijmo with NPM and Webpack to create applications targeting the most popular JavaScript application frameworks. This blog focuses on Vue.js, an ecosystem that scales between a library and a full-featured framework, Vue.js is the smallest and least opinionated framework on this list. It lets you write traditional HTML and JavaScript, or “vue” files, that combine HTML, JS, and CSS to create encapsulated reusable components. Read about Wijmo's support of Vue.js

Blog series

1. Introduction to NPM and Wijmo

2. Angular

3. React

4. Vue.js

5. Ionic

In this tutorial, we won't get into the details of NPM, Webpack, or Vue.js itself. All these tools are incredibly popular and thoroughly documented, and you can read our e-book on frameworks for a good overview. Instead, we'll focus on the task of adding Wijmo to simple applications written in Vue.js.

The basic steps for creating and maintaining applications are the same in all frameworks:

  • Install the appropriate CLI (Command-Line Interface utility) to generate, run, maintain, and deploy applications.

  • Use the CLI to create the application.

  • Use NPM to add Wijmo to the application.

  • Import the components you want to use and add the appropriate markup.

Step 1. Create a new Vue.js app

To use Wijmo and Vue.js in VS Code, we'll follow the steps outlined in the Vue.js with Visual Studio Code tutorial.

Follow these steps to create a new Vue.js app and get it up and running:

Task Command
Install CLI npm install -g vue-cli
Create app vue init webpack my-vue-app
Switch to app folder cd my-vue-app
Add Wijmo to the app npm install wijmo
Start app npm run dev
View app in the browser http://localhost:8080

You should see the app running in the browser. Let’s start editing the app. When you save changes, the browser will reload the app automatically.

Step 2. Add Wijmo modules

Vue.js projects usually define components in files with a “vue” extension. These files contain the HTML, JavaScript, and CSS for the components. This is like React, where markup and script are bundled into JSX files.

The sample app has two components: “App” and “HelloWorld”. The first is the main component. It displays the Vue.js logo and “HelloWorld” component below.

Open the “src/components/HelloWorld.vue” file in VS Code and start by editing the HTML part of the file:


<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Here are some Wijmo controls for you to get started:</h2>
    <div class="App-panel">
      <wj-flex-grid
        :itemsSource="data">
      </wj-flex-grid>
      <wj-flex-chart 
        :itemsSource="data"
        bindingX="country">
        <wj-flex-chart-series name="Sales" binding="sales">
        </wj-flex-chart-series>
        <wj-flex-chart-series name="Expenses" binding="expenses">
        </wj-flex-chart-series>
        <wj-flex-chart-series name="Downloads" binding="downloads">
        </wj-flex-chart-series>
      </wj-flex-chart>
    </div>
  </div>
</template>

The markup looks a lot like Vue.js. Directives correspond to Wijmo controls or classes, and attributes correspond to properties.

Step 3. Add the Wijmo controls and their data

Now let's look at the JavaScript part of the code, right below the HTML:


<script>

  // import Wijmo
  import 'wijmo/styles/wijmo.css';
  import { WjFlexGrid } from 'wijmo/wijmo.vue2.grid';
  import { WjFlexChart } from 'wijmo/wijmo.vue2.chart';
  import { CollectionView } from 'wijmo/wijmo';

  // apply Wijmo license key
  import { setLicenseKey } from 'wijmo/wijmo';
  setLicenseKey('your key goes here');

  // export component
  export default {
    name: 'HelloWorld',
    data: function () {
      return {
        msg: 'Welcome to Your Vue.js App',
        data: getData()
      }
    }
  }
  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
        data = [];
    for (var i = 0; i < countries.length; i++) {
      data.push({
        country: countries[i],
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000,
        downloads: Math.round(Math.random() * 20000),
      });
    }
    return new CollectionView(data);
  }
</script>

The code imports the Wijmo styles and components, then exports an object that contains the message to show on the screen and the data to show in the controls.

Step 4. Update the stylesheet

The file ends with a few CSS rules:


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .App-panel {
    margin: 0 48pt;
  }
  .App-panel .wj-control {
    display: inline-block;
    vertical-align: top;
    width: 400px;
    height: 300px;
  }
</style>

Now press ctrl+S to save the changes and switch back to the browser to see the result of the changes:

Vue.js app

Because the grid and the chart are bound to the same CollectionView, any changes made to the data in the grid are automatically reflected in the chart. For example, you may click the column headers to sort the data or edit some values using the keyboard.

Conclusion

Integrating Wijmo into modern JavaScript applications is just a matter of installing it with NPM and importing the components you want from the library.

Being able to use the exact same UI components on different frameworks makes things easier you work with two or more frameworks, or are planning to switch frameworks in the future.

Get Wijmo 2018 v1 now