Using Wijmo with Nuxt.js

Nuxt.js is a powerful framework built on Vue.js that enables the development of universal, server-rendered web applications. Nuxt.js is a server-side rendering and static site generation framework built on Vue

Wijmo Components for vue2 allow you to use Wijmo controls in Nuxt.js project. A Wijmo Vue2 component is a wrapper for the Wijmo control that creates a Wijmo control behind the scenes and provide reference to the control instance via ref property & it allows you to bind to the control properties and events declaratively.

type=info

Please note that only client-side rendering is supported and server-side rendering is not supported in Nuxt.js.

The default rendering mode for Nuxt.js applications is Universal, which combines server-side and client-side rendering.

SSR can be disabled by setting ssr to false in nuxt.config.ts file

export default defineNuxtConfig({ ssr: false })

Installation

Wijmo vue2 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 

Importing Wijmo components

Wijmo components and directives can be directly imported from the wijmo.vue2 packages and can be used in the component as follows: 

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

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. 

You can load the styles in your component that uses Wijmo controls, using this ESM import statement.

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

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 

Data-Flow with attributes

The attribute names must be prepended with the v-bind: directive (or its ':' shorthand). The only exception where you can omit the v-bind: directive is when binding a string type property to a string constant. This is called one-way binding and used to set the property’s value or event handler. 

The two-way binding is achieved using the v-model directive. It allows you to create a two-way binding between form inputs and component data to keep the value updated. 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> 

Event Binding

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

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

The "initialized" Event

All Wijmo Vue components include an "initialized" event that is raised after the control has been added to the page and initialized. 

You can use this event to perform further initalization in addition to setting properties in markup. The signature of the handler function is the same as any other Wijmo event handlers.

For example:

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

Creating Wijmo controls in code

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 code: 

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