Using Wijmo with Nuxt.js

Nuxt is a powerful framework built on top of Vue.js, designed to simplify the development of universal (server-side rendered), static, and single-page applications. It provides a structured and opinionated approach to building Vue applications while enhancing performance, developer experience etc.

Wijmo Components for Vue allow you to use Wijmo controls in a Nuxt.js project. A Wijmo Vue component serves as a wrapper for the Wijmo control, automatically creating the control instance behind the scenes. It provides access to the control via the ref property and enables declarative binding to its properties and events.

type=note

Note: By default, Nuxt.js applications use Universal mode, which integrates both server-side rendering (SSR) and client-side rendering. However, Wijmo supports the client-side rendering only. Hence, to ensure proper functionality when incorporating Wijmo into a Nuxt.js application, you must disable the server-side rendering by setting the ssr property to false.

export default defineNuxtConfig({ ssr: false })

Apart from this setting, you can integrate Wijmo in your Nuxt.js application as you do it in a Vue application. For information on how to integrate Wijmo in your Nuxt/Vue application, see Vue Quick Start.

Note that you must use the Nuxt CLI to create a Nuxt application, just like you create a Vue application using Vue CLI. For more information on creating Nuxt application, see Getting Started with Nuxt.

Nuxt.js Components

Wijmo Vue components are available as separate npm packages. npm package for each component is named after its core library with "vue2" included in the package name. For example, "wijmo.vue2.grid" package represents components for controls from the core "wijmo.grid" package. 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, refer to the topic Reference Wijmo Packages.

In the Nuxt.JS project, the Wijmo components and directives can be directly imported from the wijmo.vue2 packages and can be used in the component by using Custom component-level registration methods only. Refer to the Vue 3 Components topic, for details on these methods.

type=note

Note: Wijmo components are intended for a usage in Nuxt.js app as component.

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 "vue" word in the name. For example, this code creates a FlexGrid control in the code:

import { FlexGrid } from '@mescius/wijmo.grid'; 
onMounted(() => {  
grid = new FlexGrid("#host_element");})

<span lang="EN-US" style="mso-ascii-font-family:Aptos;mso-fareast-font-family:Aptos;mso-hansi-font-family:

Aptos;mso-bidi-font-family:Aptos">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 load the styles in your component that uses Wijmo controls, using this ESM import statement.

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

<span lang="EN-US" style="mso-ascii-font-family:Aptos;mso-fareast-font-family:Aptos;

mso-hansi-font-family:Aptos;mso-bidi-font-family:Aptos">Nuxt.js Markup Syntax

Wijmo Vue components use Vue3 naming conventions in template markup. It supports low-case-dash and camelCase syntax to specify the component, its properties, and events as follows:  

<wj-input-number :value-changed="ctrlValueChanged"> //low-dash-case
<WjInputNumber :valueChanged= "ctrlValueChanged">  // camelCase  

<span lang="EN-US" style="mso-ascii-font-family:Aptos;mso-fareast-font-family:Aptos;mso-hansi-font-family:

Aptos;mso-bidi-font-family:Aptos">DataFlow with attributes

• 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.

<script setup>
import { ref } from 'vue'
import { WjInputNumber } from '@mescius/wijmo.vue2.input';
const count = ref(3)  // variables </script>
<wj-input-number v-model:value="count"  //two way binding
    format="n2" //binding to a string constant
    :isReadOnly="true">//binding to Boolean 
</wj-input-number>  

<span lang="EN-US" style="mso-ascii-font-family:Aptos;mso-fareast-font-family:Aptos;mso-hansi-font-family:

Aptos;mso-bidi-font-family:Aptos">Event handlers

Wijmo event handlers are defined as functions with two parameters: sender and event argument. While binding to a component event, you must specify the name of a function with this signature.

<script setup>
import { ref } from 'vue'
import { WjInputNumber } from '@mescius/wijmo.vue2.input';
const count = ref(3)  // variables
//event-handlers
function valueChanged(s,e){
    console.log("Control value changed!"+s.value);
}</script>
<template>
<wj-input-number v-model:value="count" :valueChanged="valueChanged"></wj-input-number>
</template> 

<span lang="EN-US" style="mso-ascii-font-family:Aptos;mso-fareast-font-family:Aptos;mso-hansi-font-family:

Aptos;mso-bidi-font-family:Aptos">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.

<script setup>
import { ref } from 'vue'
import { WjInputNumber } from '@mescius/wijmo.vue2.input';
const count = ref(3) // variables
//event-handlers
function initializedCtrl(s,e){
console.log("Control initialized event triggered!");
}</script>
<template>
<wj-input-number v-model:value="count" :initialized="initializedCtrl">
</wj-input-number>
</template>