Using Gantt wrapper in Nuxt app

[Al]

Is this possible?

I took a chance and ran through the regular installation process here:

https://www.telerik.com/kendo-vue-ui/components/gantt/#toc-initializing-with-webpack

but I get error 'window is not defined' in kendo.core.js for this line: 

    ....

    })(jQuery, window);

    

 

 

[Al]

So it seems that Nuxt's SSR is a problem as the Kendo components do not support this, but there is a way to do it by creating a plugin.

Create kendovue.js in /plugins with this code:

 

    import Vue from "vue";
    import "@progress/kendo-ui";
    import "@progress/kendo-theme-bootstrap/dist/all.css";
    import { GanttInstaller } from "@progress/kendo-gantt-vue-wrapper";
    Vue.use(GanttInstaller);

 

Then in nuxt.config.js:

 

    plugins: [{
      src: '~/plugins/kendovue.js',
      mode: 'client'    
    }],

 

Then use in your page/component:

 

    import { Gantt } from '@progress/kendo-gantt-vue-wrapper'

    export default {
        components: {
            'gantt': Gantt 
    },

 

 

[Petar]

Hi Al,

I am happy to hear that you've managed to implement the Gantt Wrapper component in your application. Thank you for sharing the approach that you used!

I can confirm that our Wrapper components don't support SSR. The SSR is only supported in our Kendo UI for Vue Native suite. 

Currently, we don't have a Native Gantt component but we have a Feature request for such. What I can suggest is to vote for the linked Feature request. The more votes the request collects, the bigger the chance for its sooner implementation is.

You can also follow the linked feedback portal item. Thus, once there is a change in its status, you will be notified. 

Regards,
Petar
Progress Telerik