Using Wijmo with Vue3

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.

This guide will help you quickly create your first Vue 3 DataGrid, by using Wijmo's FlexGrid component.

Installation

Wijmo Vue3 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.

Importing Wijmo Components with Composition API

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

1. Custom component level registration

2. Use auxiliary register functions.

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:

Custom component level registration

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

<script setup> 
import { ref } from 'vue'; 

import { WjTooltip as vWjTooltip} from '@mescius/wijmo.vue2.core'; //import directive
import { WjInputNumber } from '@mescius/wijmo.vue2.input'; //import component
const count = ref(3) // variables

</script> 

<template> 
  <button v-wjTooltip="'Just a string'"> 
    Paragraph with a string tooltip. 
  </button> 
  <br> 
  <wj-input-number v-model:value="count"></wj-input-number><br> 
</template>

Use 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 adds a wj-flex-grid component to App component's template: 

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, 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

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

More Vue Instrucitons

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