Vue Components

Given that Vue 2 has reached its end of life, transitioning to Vue 3 is strongly recommended for ongoing support and compatibility with Wijmo

In the 2020 V2 Release, Wijmo library introduced beta support for Vue 3 through the same interop mechanism utilized in Vue 2. However, existing custom components reliant on Wijmo will need adjustments to function seamlessly within the Vue 3 environment.

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

npm install @mescius/wijmo.vue2.all

See this topic for more details about Wijmo npm packages.

In Vue3 project, the wijmo components can be used in the following two ways:

Custom component level registration

This is the clearest registration method for registering Wijmo components and directives on the custom component level.

Using auxiliary register functions.

Registers all components and directives from the given Wijmo module on the application level.
Useful if many components are used and need to be registered simultaneously.

Custom component level registration

This method of registration is used to register the Wijmo Components at the Component level. For example, this code imports the Wijmo Component and directive and register them at Component level

Options API

<template>

<wj-input-number />

 <button v-wjTooltip="’Click me’">Click</button>

</template>

<script>
  import { WjTooltip } from '@grapecity/wijmo.vue2.core'; // import Wijmo Tooltip directive
  import { WjInputNumber } from '@grapecity/wijmo.vue2.input'; // import the Wijmo InputNumber Vue3 component

  export default {
    components: {
      WjInputNumber, // register the InputNumber Component for Vue3 component
    },
    directives: {
      WjTooltip, // register the directive for Vue3 component
    },
  }
</script>

Composition API

<script setup>

import {WjTooltip as vWjTooltip} from "@mescius/wijmo.vue2.core"
import {WjInputNumber} from "@mescius/wijmo.vue2.input"

</script>
<template>
  <button v-wjTooltip="'Click me'">Click</button>
  <wj-input-number ></wj-input-number>
</template>

Using Auxiliary Register Functions

With this setup, you can import Wijmo Vue modules and use the components and directives they contain from the given Wijmo module on the application level. This method is useful is there are many vue components using wijmo components in the application. For example, this code registers the component in main.js file and adds a wj-input-number and wj-tooltip directive component to App component's template:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import '@mescius/wijmo.styles/wijmo.css';
import { registerCore} from "@mescius/wijmo.vue2.core";
import { registerInput } from "@mescius/wijmo.vue2.input";

let app = createApp(App);
registerCore(app);
registerInput(app);
app.mount('#app');
App.vue:

app.vue

<template>
  <button v-wjTooltip="'Click me'">Click</button>
  <wj-input-number ></wj-input-number>
</template>

You only need to import registerModuleName from Vue modules once, ideally in the root module of your Single Page Application. For instance, the registerInput method is imported from the wijmo.vue2.input module and called with the app instance, which represents the application. Here's an example:

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 a CSS import statement at the top of the <style> section like this:

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:

With Auxilary Registration method the lower-case-dash syntax can be used:

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

For writing the component in camelCase with Auxilary Registration ,'import the Component from module and specify in the component

import {registerInput,WjInputNumber} from "@mescius/wijmo.vue2.input"

let app = createApp(App);

// register the Wijmo Components

app.component('WjInputNumber',WjInputNumber);

app.mount('#app');`

app.vue

<WjInputNumber></WjInputNumber>\

Auxilary registration method : specify each component that would be used in the project.

Custom component registration method: Both the lower-case-dash and camelCase syntax can be used to specify the component

For Vue3, there is no strict convention enforced for naming attributes, properties, and events. This means, Wijmo component properties and events can be specified using camelCase and 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. This is called one-way binding and used to set the property’s value or event handler.

The two-way binding is achieved using the v-model directive. It allows you to create a two-way binding between form inputs and component data. When you use v-model, Vue automatically handles updating the data property and the input element's value.

<wj-input-number
    v-model:value="amount" // two-way binding to a component property
    format="n0" // binding to a string constant
    :is-read-only="true" // binding to boolean
    :valueChanged="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:

Options API

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

<script>
...
let App = {
    ...
    methods: {
        onValueChanged: function(sender, args) {
            this.amount = sender.value;
        },
    ...
};
...
</script>

Composition API

<script setup>

import {ref} from "vue"
const amount = ref(100) // variables

//methods and event handler methods
function valueChanged(sender,args){
   amount.value = sender.value;
}

</script>
<template>

  <button v-wjTooltip="'Click me'">Click</button>

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

</template>

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:

Options API

<template>
<wj-flex-grid :initialized="initGrid">
</wj-flex-grid>
</template>
<script>
...
let App = {
    ...
    methods: {
        initGrid: function(grid, args) {
            grid.mergeManager = new CustomMerge(grid);
        },
    ...
};
...
</script>

Composition API

<script setup>
function initGrid(sender, args){
  //your code
}

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

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