How to build Vue.js apps with Wijmo and NPM
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
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 tons of great enhancements, with built-in support for all the popular tools developers often must figure out 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
Task |
Command |
| Install Vue CLI 3.0 | npm install -g @vue/cli |
| Create app | vue create my-vue-app-3 |
| Switch to app folder | cd my-vue-app-3 |
| Add Wijmo to the app | npm install wijmo |
| Launch GUI | vue ui |
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.
OLD CONTENT:
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:
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.
