100+ Fast and Flexible Vue UI Components

1. Go to the Vue app folder and install the Wijmo library using npm.

* The npm commands are the same for both Vue 2 and Vue 3.

npm install @mescius/wijmo.vue2.all

2. Add css file to apply Wijmo style.

Access the src/main.js file of the Vue app you want to work on and add the Wijmo css file.

// main.js

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

3. Add the Wijmo modules you want to use.

* This section explains how to use auxiliary registration functions. For information on registering at the custom component level, see here.

The code below imports Wijmo's FlexGrid control.

If you would like to add other controls, please check the detailed code samples for each control below.

// main.js

import { registerGrid } from '@mescius/wijmo.vue2.grid';

4. Modify the initialization-related code below as follows.

// main.js

let     app     =     createApp     (     App     ); 

registerGrid     (     app     ); 

app     .     mount     (     '#app'     );

Below is the entire code within the modified src/main.js.

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

5. Initialize the Wijmo control and add it to the screen.

Access the src/App.vue file to initialize the Wijmo controls, generate sample data, and then write code to display the Wijmo controls on the screen.

Please check the detailed code below.

6. Run the Vue app and check the result.

npm run serve