Build Vue Apps with Wijmo and the New Vue CLI 3.0

Notice: Code examples in this blog use Wijmo modules from the non-scoped ‘wijmo’ npm package. Beginning with Wijmo 2019 v1 release, Wijmo packages are also available in the @grapecity npm scope, and the use of these packages is the recommended for new applications. For the convenience of our customers, we continue publishing new Wijmo builds as non-scoped ‘wijmo’ packages as well.

Read more about Wijmo NPM Package Changes.

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.

The latest Vue CLI 3.0 brings a variety of great enhancements. With built-in support for all the popular tools, developers do not have to learn the tools all on their own. It also has a graphical user interface that makes it easy to edit projects without having to remember thousands of options for different tools.

These are the updated steps required create a new VueJS app and get it up and running:

Step 1. Create a new Vue.js app

Step 2:

The next step is to use the GUI to enable Vue’s runtime compiler. The runtime compiler is required by the current version of the Wijmo Vue interop (this will not be necessary in the next version of Wijmo’s Vue interop):

Don’t forget to click the “Save Changes” button after enabling the runtime compiler.
You can now run the app from the GUI as shown below:

This has the same effect as running the app from the command line:

npm run serve

You should see the app running in the browser. Let’s start editing the app. Whenever you save any changes, the browser will re-load the app automatically.

VueJS 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 VueJS 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 Angular. Directives correspond to Wijmo controls or classes, and attributes correspond to properties.

Step 3. Add the Wijmo controls and their data

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

<script>  
  // import Wijmo  
  import 'wijmo/wijmo.vue2.grid';  
  import 'wijmo/wijmo.vue2.chart';  
  import { CollectionView } from 'wijmo/wijmo';  

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

  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);  
  }  

  export default {  
    name: 'HelloWorld',  
    data: function() {  
      return {  
        msg: 'Welcome to Your Vue.js App',  
        data: getData()  
      }  
    }  
  }  
</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>  

Press ctrl+S to save the changes.

To finish, open the ‘src/App.vue’ file in VS Code and add a line to import Wijmo’s css file:

<style>  
@import "../node_modules/wijmo/styles/wijmo.css";  

#app {  
  font-family: 'Avenir', Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>  

Press ctrl+S to save the file and switch to the browser to see the result of the changes:

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.

Usimg Wijmo and modern JavaScript applications

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 if you work with multiple frameworks or think you might switch frameworks in the future.