100+ Fast and Flexible Nuxt UI Components

* The guide below uses Nuxt 3.13.0

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

To use Wijmo in Nuxt, use the Wijmo components for Vue.

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

npm install @mescius/wijmo.vue2.all

2. Create a folder and file to load the Wijmo library.

This article explains how to set up Wijmo's FlexGrid control.

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

Create a "components" folder in the root folder of your project, then create a FlexGrid.vue file in that folder.

3. Add css file to apply Wijmo style.

Add the Wijmo css file to the components/FlexGrid.vue file as follows:

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

4. Add the Wijmo modules you want to use.

Add the Wijmo module as follows:

Please check the sample below for detailed code for each control.

import { namespace } from '@mescius/wijmo.vue2.{control name}' ;

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

Access the components/FlexGrid.vue and app.vue files to initialize the Wijmo controls, generate sample data, and then write code to display the Wijmo controls on the screen. See the detailed code below.

6. Wijmo does not support server-side rendering (SSR), so configure the component to render only on the client side.

Add the { ssr : false } setting to the nuxt.config.ts file as shown below.

export default defineNuxtConfig({

   ssr: false ,

})

You can see the full code for each control in the sample below.

7. Run the Nuxt app and check the results.

npm run dev