Getting Gantt Pro 8 working with Vue 3

Gantt
#1

Hi there,

I have got Gantt Pro 8 working in Vue 2. I basically have a component GanttChart which has the following imports:

import '@services/dhtmlx-gantt-chart/dhtmlxgantt.js';
import '@services/dhtmlx-gantt-chart/dhtmlxgantt.css';

The dhtmlxgantt.js is a webpack build output file. Then on the mounted I have the following to get a GanttChart instance:

const ganttChart = Gantt.getGanttInstance();

Now I am trying to use Vue 3 but the .js file won’t work so I decided to download the latest copy and thought I could simply change the dhtmlxgantt.js file to the latest Pro version not built using Webpack. The file starts with the following.

/*
@license

dhtmlxGantt v.8.0.6 Professional

But I get an error Uncaught (in promise) ReferenceError: Gantt is not defined

So I am not sure how to get this “installed” for Vue 3. I tried to follow this guide but its very confusing as to how we can install it as a local npm pacakge when the zipped Pro files do not even have a package.json for it?

Any help will be greatly appreciated. Thanks.

#2

Hello,
That issue can occur if you use Vite. For some reason, it doesn’t include DHTMLX Gantt files. So, you will need to add the following configuration to the vite.config.js file:

  optimizeDeps: {
    include: [
      'dhtmlx-gantt',
    ]
  }

Here are the demos:
https://files.dhtmlx.com/30d/c0a7cdde5ff4139e785733d9bfdbc9fb/vue3+gantt-gpl.zip

https://files.dhtmlx.com/30d/e8f8df5f93c8fd480d9056eba19e9be5/vue3+GanttInstance+8.0.1_trial.zip

The Pro versions should have the package.json file. If you don’t have it, please submit a support request via email to discuss that issue. You can find the support email in the letter with the Gantt license.

1 Like
#3

Thanks @ramil. You suggestion worked!