Vue Components

Supports Vue version 2.0.0 or higher.

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.

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 "@mescius/wijmo.vue2.all" group package:

npm install @mescius/wijmo.vue2.all

See this topic for more details about Wijmo npm packages.

After that you can import modules using ESM import statements. For example, this import statement imports the content of the "wijmo.vue2.grid" module:

import '@mescius/wijmo.vue2.grid';

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 '@mescius/wijmo.vue2.grid';
import { getData } from './data';

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

Note that Wijmo Vue components are registered globally, so you don't need to import any specific class or variable from the @mescius/wijmo.vue2.* modules. Because of this, you can use an import statement without a from clause. It's enough to import Wijmo Vue modules only once, somewhere in the root module of your Single Page Application. It is also acceptable to import modules multiple times.

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 @mescius/wijmo.styles npm package. There are two main

css files:

wijmo.css - includes styles for all Wijmo controls
wijmo-core.css - truncated version of wijmo.css, which doesn't include styles for Enterprise controls.

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/@mescius/wijmo.styles/wijmo.css';

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

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

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

Vue Markup Syntax

Wijmo Vue components use consistent naming conventions in template markup. The HTML element and attribute names used for components can be easily inferred from component classes and member names by using the following simple rules:

The HTML element name representing a Wijmo component is specified using lower-case-dash syntax. For example, WjInputNumber component should be spelled as wj-input-number:

<wj-input-number :value="amount"></wj-input-number>

Names of the attributes representing Wijmo component properties and events are specified using lower-case-dash as well. The names must be prepended with the v-bind: directive (or its ':' shorthand). The only exception where you can omit the v-bind: directive is when binding a string type property to a string constant. For example:

<wj-input-number
    :value="amount" // binding to a component property
    format="n0" // binding to a string constant
    :is-read-only="true" // binding to boolean
    :value-changed="valueChanged"> // event binding
</wj-input-number>

Event binding details

Wijmo event handlers are defined as functions with two parameters: sender and event argument. When you bind to a component event, you should specify the name of a function with this signature as a binding source. For example:

<wj-input-number
    :value="amount"
    :value-changed="onValueChanged">
</wj-input-number>

methods: {
    onValueChanged: function(sender, args) {
        this.amount = sender.value;
    },
    ...
}

The "initialized" Event

All Wijmo Vue components include an "initialized" event that is raised after the control has been added to the page and initialized.

You can use this event to perform further initalization in addition to setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers. For example:

<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>

methods: {
    initGrid: function(grid, args) {
        grid.mergeManager = new CustomMerge(grid);
    },
    ...
}

Creating Wijmo controls in code

Wijmo components for Vue are intended for a usage in template markup. If you want to create a Wijmo control in code, you should use a Wijmo control from a core module for this purpose, instead of a component. A core module has the same name as a corresponding Vue interop module, but without the "vue2" word in the name. For example, this code creates a FlexGrid control in code:

import { FlexGrid } from '@mescius/wijmo.grid';
let flex = new FlexGrid('#host_element');