FlexGrid not rendering vue3

Posted by: bosbach on 24 April 2023, 12:54 am EST

  • Posted 24 April 2023, 12:54 am EST - Updated 24 April 2023, 1:05 am EST

    Hi at all,

    I’m relativ new in vue.js and I’m trying to get felxgrid working in my app based on a sample I found online.

    I have an asp.net mvc application, in which I wan’t to render some wijmo components.

    I was able to run a basic vue sample code in my sample.vue but can’t get the grid working.

    From what I see the wijmo markup doesn’t get translatet to html markup language.

    The normal html dom elements like a paragraph are getting renderd, but the wijmo elements like “<wj-flex-grid” are not.

    From what i found online, a vue runtimeCompiler is needed if I use custom markup elements, is this true? ( I couldn’t find anything helpful here)

    How to I get the flex grid to render?

    PS: I can break in the getData function, so the skript itself is runing, from what it looks like, just the correct dom doenst get created.

    My package.json looks like this

      "name": "my-webpack-project",
      "version": "1.0.0",
      "scripts": {
        "dev": "webpack serve --mode=development --node-env=development",
        "build": "webpack --mode=production --node-env=production",    
        "build:dev": "webpack --mode=development",
        "build:prod": "webpack --mode=production --node-env=production",
        "watch": "webpack --watch",
        "serve": "webpack serve"
      "dependencies": {
        "bootstrap": "5.2.3",
        "axios": "^1.3.4",
        "core-js": "^3.8.3",
        "vue": "^3.2.13",
        "@grapecity/wijmo.vue2.all": "5.20231.879-rc",
        "jszip": "3.1.3"
      "devDependencies": {
        "@babel/core": "^7.21.4",
        "@babel/eslint-parser": "^7.12.16",
        "@babel/preset-env": "^7.21.4",
        "@vue/cli-plugin-babel": "~5.0.0",
        "@vue/cli-plugin-eslint": "~5.0.0",
        "@vue/cli-service": "~5.0.0",
        "@vue/compiler-sfc": "3.2.13",
        "@webpack-cli/generators": "^3.0.1",
        "babel-loader": "^9.1.2",
        "cross-env": "^1.0.6",
        "css-loader": "^6.7.3",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
        "style-loader": "^3.3.2",
        "webpack": "^5.78.0",
        "webpack-cli": "^5.0.1",
        "webpack-dev-server": "^4.13.3",
        "vue-loader": "17.0.1"
      "description": "My webpack project"

    The sample.vue:

                FlexGrid Control
                This section shows FlexGrid control with column definitions.
            <div class="seperator" />
            <wj-group-panel :grid="flex"
                            placeholder="Drag columns here to create Groups"
                            :max-groups="4" />
            <wj-flex-grid :initialized="gridInitialized"
                <wj-flex-grid-filter />
                <!--<wj-flex-grid-detail :isAnimated=true v-slot="ctx">
                        <li>ID: <b>{{ctx.item.id}}</b></li>
                        <li>Country: <b>{{ctx.item.country}}</b></li>
                        <li>Downloads: <b>{{ctx.item.downloads}}</b></li>
                        <li>Sales: <b>{{ctx.item.sales}}</b></li>
                <wj-flex-grid-column binding="id" header="ID" />
                <wj-flex-grid-column binding="country" header="Country">
                    <!--<wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
                        <span :class="'flag-icon flag-icon-' + cell.item.country.toLowerCase()"></span>
                <wj-flex-grid-column binding="downloads" header="Downloads" />
                <wj-flex-grid-column binding="sales" header="Sales" />
        import * as wjcCore from '@grapecity/wijmo';
        export default {
            data: function () {
                var data = this.getData();
                return {
                    flex: null,
                    itemsSource: data,
                    selectedItem: data[0]
            methods: {
                gridInitialized: function (s) {
                    this.flex = s;
                selectionChanged: function (s) {
                    this.selectedItem = s.selectedItems[0];
                wjFormat: function (value, format) {
                    return wjcCore.Globalize.format(value, format);
                getData: function () {
                    // create some random data
                    let countries = "US,Germany,UK,Japan,Italy,Greece".split(","),
                        data = [];
                    for (let i = 0; i < 200; i++) {
                            id: i,
                            country: countries[i % countries.length],
                            downloads: Math.round(Math.random() * 20000),
                            sales: Math.random() * 10000,
                            expenses: Math.random() * 5000
                    return new wjcCore.CollectionView(data);

    an the loading of the component:

    import { createApp } from 'vue'
    import App from './sample.vue'

    the webpack config:

    const path = require("path");
    const fs = require('fs')
    const appBasePath = './wwwroot/Scripts/app/'
    const isProduction = process.env.NODE_ENV == "production";
    const stylesHandler = "style-loader";
    const resolvePath = (...args) => path.resolve(path.join(__dirname, ...args));
    const { VueLoaderPlugin } = require('vue-loader')
    const jsEntries = {}
    // We search for index.js files inside basePath folder and make those as entries
    fs.readdirSync(appBasePath).forEach(function (name) {
        var indexFile = appBasePath + name + '/index.js'
        if (fs.existsSync(indexFile)) {
            jsEntries[name] = indexFile
    const config = {
      entry: jsEntries,    
      output: {
          path: path.resolve(__dirname, './wwwroot/Scripts/bundle/'),
          publicPath: 'wwwroot/Scripts/bundle/',
          filename: '[name].js'
        resolve: {
            alias: {
                '@': resolvePath('frontend'),
                'vue$': 'vue/dist/vue.esm-bundler.js',
            extensions: [
      devServer: {
        open: true,
          host: "localhost",
          proxy: {
              '*': {
                  target: 'https://localhost:7211',
                  changeOrigin: true,
                  secure: false
      plugins: [
        // Add your plugins here
        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
      module: {
          rules: [
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
                        sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
            test: /\.(js|jsx)$/i,
            loader: "babel-loader",
            test: /\.css$/i,
            use: [stylesHandler, "css-loader"],
            test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
            type: "asset",
          // Add your rules for custom modules here
          // Learn more about loaders from https://webpack.js.org/loaders/
        plugins: [
            // make sure to include the plugin!
            new VueLoaderPlugin()
    module.exports = () => {    
      if (isProduction) {
        config.mode = "production";
      } else {
        config.mode = "development";
      return config;

  • Posted 25 April 2023, 2:43 pm EST


    This issue is occurring because the Wijmo components and directives are not registered. To Use Wijmo Components in Vue 3 we have to register these components, this can be done using one of the following approaches:

    Register Wijmo components and directives on the custom component level.

    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)

    So, basically if we use 2nd method, then we need to modify the below code:

    import { createApp } from 'vue'
    import App from './sample.vue'

    Modified code:

    import { createApp } from 'vue'
    import { registerCore } from '@grapecity/wijmo.vue2.core';
    import { registerGrid } from "@grapecity/wijmo.vue2.grid";
    import { registerGridFilter } from '@grapecity/wijmo.vue2.grid.filter';
    import { registerGridGrouppanel } from '@grapecity/wijmo.vue2.grid.grouppanel';
    import App from './sample.vue'
    const app = createApp(App);
    //register all components and directives from respective modules.

    In case, if we use the 1st method, then we need to manually need to specify the Wijmo components and directives on the custom component level.

    Please refer to this sample for more information on using Wijmo with Vue3:

    https://www.grapecity.com/blogs/wijmo-in-vue-3 .

    Please refer to this sample for reference:



    Manish Gupta

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels