Using Wijmo with Vue

Wijmo components for Vue allow you to use Wijmo controls in Vue templates markup. A Wijmo Vue component is a wrapper for the Wijmo control it represents. Component creates a Wijmo control behind the scenes, and provides a reference to the control instance via the control property. Component allows you to bind to the control properties and events declaratively in the Vue template markup.

Note We highly recommend that you download the Wijmo dev kit in addition to installing from npm. The dev kit includes hundreds of samples with source code, reference apps and more.

Installation

Wijmo Vue components are shipped as a set of npm packages, one package per core library package, with the "vue2" word in their names. For example, "wijmo.vue2.grid" package represents components for controls from the core "wijmo.grid" package. The packages can be installed separately, or all together using the "@grapecity/wijmo.vue2.all" group package:

npm install @grapecity/wijmo.vue2.all

See this topic for more details about Wijmo npm packages.

Importing Wijmo components

With this setup, you can import Wijmo Vue modules and use the components they contain. For example, this code adds a wj-flex-grid component to App component's template:

<template>
    <wj-flex-grid :items-source="data"></wj-flex-grid>
</template>

<script>
import Vue from 'vue';
import '@grapecity/wijmo.vue2.grid';
import { getData } from './data';

let App = Vue.extend({
    name: 'app',
    data: function () {
        return {
            data: getData()
        }
    }
})
</script>

Adding Wijmo css

For Wijmo controls to look and work correctly, you need to load Wijmo css styles into your application. The styles are shipped in the @grapecity/wijmo.styles npm package.

You can load styles in your application's root component file. If you use single-file component .vue files, add css import statement like this at the top of the style section:

@import '../node_modules/@grapecity/wijmo.styles/wijmo.css';

Note that you should specify the relative path to the file here, which includes the nodemodules_ folder.

If you use ordinary .js files, just add this ESM import statement at the beginning of the file:

import '@grapecity/wijmo.styles/wijmo.css';

More Vue Instrucitons

Refer to the Vue Components topic for more details on using Wijmo in Vue applications.