Vue Components

Wijmo Vue components are available as separate npm packages. Name of each npm package is based on the corresponding control name in the core library with "vue2" included in the package name. For example, "wijmo.vue2.grid" provides Vue components for "wijmo.grid." You can install the components individually or all of them at once with "wijmo.vue2.all."

npm install @mescius/wijmo.vue2.all

For more information on Wijmo npm packages, see Reference Wijmo Packages.

In a Vue project, there are two ways to use the Wijmo components:

Custom Component-Level Registration
Auxiliary Register Functions

Custom component level registration

The simplest way to register Wijmo components and directives is at the custom component level. You can either use the Composition API or the Options API to integrate Wijmo components within Vue applications. Codes below show how to import the Wijmo component and register them at the Component level using Composition API and Options API.

Code for 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>

Options API

<template>
  <wj-input-number/>
   <button v-wjTooltip="'Click me'">Click</button>
  </template>
  <script>
    import {WjTooltip } from '@mescius/wijmo.vue2.core'; // import Wijmo Tooltip directive
    import { WjInputNumber } from '@mescius/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>

Auxiliary register functions

The auxiliary register functions allow you to register all components and directives from a specific Wijmo module at the application level. This approach is particularly useful when multiple components need to be registered at once, ensuring a streamlined and efficient setup. The code below adds a wj-flex-grid component to the App.vue file’s template section:

main.js



import {createApp } from 'vue' 
import App from './App.vue' 
import '@mescius/wijmo.styles/wijmo.css'; 
import{registerGrid} from "@mescius/wijmo.vue2.grid" 
let app = createApp(App); 
    registerGrid(app);
    app.mount('#app')

app.vue

<script setup> 
import { ref } from 'vue' 
// variables 
const data = ref(getData()) 
//methods 
function getData() { 
    var data = []; 
    var countries="US,Japan,India,Italy,UK".split(","); 
    for (let i = 0; i < 5; i++) { 
        data.push({ 
            id: i+1,  
            country: countries[i%countries.length], 
            sales: Math.random() * 1000, 
            downloads: Math.random() * 1000 
                }); 
    } 
  return data; 
} 
</script> 
<template> 
<wj-flex-grid :itemsSource="data"></wj-flex-grid> 
</template>

You only need to import registerModuleName from Vue modules once, preferably 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.

type=note
Note: Wijmo Vue components are designed for use in template markup.

To create a Wijmo control in code, use the corresponding Wijmo control from the core module instead. That is, use "wijmo.grid" to create the FlexGrid control in code and not "wijmo.Vue2.grid".

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

Adding Wijmo CSS

Wijmo ships @mescius/wijmo.styles npm package which contains the following two files:

Wijmo.css - includes styles for all controls
wijmo-core.css - truncated version of wijmo.css. It excludes styles for Enterprise controls.

You can add styles to your Vue application by referencing in one of the following places:

Root Vue component app.vue: Add the following import statement to import styles inside the <styles> tag
```
import '@mescius/wijmo.styles/wijmo.css';
```
Main.JS – In case of using Composition API with global registration**,** add the following code at the top of the js 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:

Vue3 does not have any specific convention for naming of attributes, properties, and events. That is, you can use camelCase as well as lower-case-dash to specify Wijmo component properties and events.
The HTML element name representing a Wijmo component is specified using lower-case-dash syntax. For example, write WjInputNumber component as wj-input-number.
```
<wj-input-number :value="amount"></wj-input-number>
```
For writing the component markup in camelCase, import the Component from the module and specify in the component. For Auxiliary registration method, specify each component that you plan to use in the project
- Main.JS
```
import {WjInputNumber,
WjInputColor} from "@mescius/wijmo.vue2.input"
let app = createApp(App);
// register the Wijmo
Components
app.component('WjInputNumber',WjInputNumber).component('WjInputColor',WjInputColor);
app.mount('#app');`
```
- app.vue
```
<WjInputNumber></WjInputNumber><br\>
<WjInputColor></WjInputColor>
```
- In case of one-way binding, prepend the names with the v-bind: directive (or its ':' shorthand), except while binding a string type property to a string constant. One-way binding is used to set the property’s value or event handler.
- For the two-way binding between form inputs and component data, use the v-model directive. 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 handlers

Wijmo event handlers are defined as functions with two parameters: sender and event argument. While binding to a component event, you must define an event handler method according to the API type used by your Vue component.

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 have an initialized event, triggered after the control is added to the page and has been initialized. You can use this event for extra setup beyond setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers.

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>

Feedback

Submit and View Feedback For

Custom component level registration
Auxiliary register functions
Adding Wijmo CSS
Vue Markup Syntax
Event handlers
The "initialized" Event