Wijmo Supports Vue 3

The official release of Vue.js 3.0. is here. The Wijmo team is happy to announce that we support Vue 3!

Implementing Vue 3 Framework in Wijmo

Vue 3 includes many new features. Here, we discuss some aspects of the framework our Wijmo team addressed while implementing Vue 3 compatibility in the Wijmo library.

New Composition API and the Existing Options API

Composition API and Options API successfully co-exist, permitting usage of both APIs while working with Wijmo. We expect no difficulty using Composition API with Wijmo components. The new API looks very promising, but the real advantages will be clarified during extensive future usage.

Component Registration

Components in Vue 3 are registered on the application level. Vue 2 components are registered globally. Our Wijmo team introduced auxiliary functions and simplified application level registration.

API Changes

Specifically changes related to various aspects of components and directive registrations, slot usages, filters removal, etc. Changes are described on GitHub. Wijmo customers using Wijmo's Vue DataGrid filters in component templates may be subject to filter removal.

We discuss a filter solution later in this article.

Proxy-Based Reactivity

After a shallow dive into the internals of Vue 3, it may be concluded that everything in Vue 3 is proxy. Proxy usage requires extra effort for IE11 compatibility. This compatibility is not implemented yet.

Vue 3 features proxy-based reactivity. In Vue 2, changes in reactivity may occur in cases when objects with an internal state are used as data.

For example, a component correctly works in Vue 2 (counter view is updated) but does not work in Vue 3:

<template>
  <div>
    \{{model.counter}}
  </div>
</template>

<script>
  class Model {
    constructor() {
      this.counter = 0;
      setInterval(() => {
        this.counter++;
      }, 1000);
    }
  }

  export default {
    data() {
      return { model: new Model() };
    },
  }
</script>

Unfortunately, there is no simple way to adapt the sample for Vue 3.

Wijmo Usage With Vue 3

Vue 3 is supported by Wijmo by the same interop as Vue 2 but the usage of Wijmo components is slightly different from the usage in Vue 2.

Ways to Use Wijmo Components

1. Register Wijmo components and directives on the custom component level.
   • This is the clearest registration method
2. Use auxiliary register functions.
   • Registers all components and directives from the given Wijmo module on the application level
   • Useful if many components are used and need to be registered simultaneously

1. Custom component level registration

<template>
  <wj-input-number />
  <button v-wjTooltip="Click me">Click</button>
</template>

<script>
  import { WjTooltip } from '@grapecity/wijmo.vue2.core';
  import { WjInputNumber } from '@grapecity/wijmo.vue2.input';

  export default {
    components: {
      WjInputNumber,
    },
    directives: {
      WjTooltip,
    },
  }
</script>

2. Auxiliary Register Functions

import { createApp } from 'vue'
import App from './App.vue'
import { registerCore } from '@grapecity/wijmo.vue2.core';
import { registerInput } from '@grapecity/wijmo.vue2.input';

const app = createApp(App)
registerCore(app);  // register all components and directives from @grapecity/wijmo.vue2.core module
registerInput(app); // register all components and directives from @grapecity/wijmo.vue2.input module
app.mount('#app');

And component file (App.vue):

<template>
  <wj-input-number />
  <button v-wjTooltip="Click me">Click</button>
</template>

<script>
  export default {
  }
</script>

Filter replacing

If a custom component uses a wjFormat filter like:

<template>
    <div>\{{ theAmount | wj-format('c') }}</div>
</template>


<script>
    export default {
        data() {
            return { theAmount: 10 };
        },
    }; 
</script>

it should be replaced with the following wjFormat function call:

<template>
    <div>\{{ format(theAmount, 'c') }}</div>
</template>

<script>
    import { wjFormat } from '@grapecity/wijmo.vue2.core';


    export default {
        data() {
            return { theAmount: 10 };
        },
        methods: {
            format(value, format) {
                return wjFormat(value, format);
            },
        },
    }; 
</script>

You may see warnings like: "export 'default' (imported as 'VueModuleDefault') was not found in 'vue' in the development environment. This warning does not affect application functionality and does not appear in the production environment.

Wijmo and Vue 3

Wijmo library has beta support of Vue 3 from the same interop as Vue 2. Existing custom components that use Wijmo will require adaptation for Vue 3 environment.

This is accomplished by registering Wijmo components and directives, such as our Vue DataGrid, on the component level or application level. Application requirements dictate the registration level.

Download Now!