{"id":4033,"date":"2020-01-30T12:00:07","date_gmt":"2020-01-30T09:00:07","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=4033"},"modified":"2025-03-10T16:08:29","modified_gmt":"2025-03-10T13:08:29","slug":"use-dhtmlxgantt-vue-js-framework-demo","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/use-dhtmlxgantt-vue-js-framework-demo\/","title":{"rendered":"How to Use DHTMLX Gantt with Vue.js Framework [Demo]"},"content":{"rendered":"

Firstly published on May 11, 2017. Updated on October 10, 2022<\/strong><\/p>\n

What’s extremely awesome about our Gantt Chart library<\/a> (besides fast performance and vast variety of features) is that it allows integrations with almost all new and popular frameworks and technologies. And today we’ll show you the easiest way to use js gantt chart with Vue.js<\/a>, progressive JavaScript framework.<\/p>\n

So, follow the instructions below to create a Vue.js Gantt chart or jump to a complete demo on GitHub<\/a> right away.<\/p>\n

New to dhtmlxGantt? Learn more about the library now<\/a><\/strong><\/p>\n

How We Start<\/h4>\n

The first thing we need to do is to get an app skeleton. And for this, we’re going to use vue-cli.<\/p>\n

Firstly, make sure you have the latest stable versions of Node.js and Vue.js. You can check your Node.js version with the help of node -v<\/strong> command or download the latest one on the Node.js website<\/a>. You can find detailed instructions on how to install the latest Vue.js version as well as vue-cli in this article<\/a>.<\/p>\n

You can install vue-cli with the node package manager using command (npm install -g @vue\/cli<\/strong>) or using yarn:<\/p>\n

yarn global upgrade --<\/span>latest @<\/span>vue\/<\/span>cli
\nyarn global add @<\/span>vue\/<\/span>cli<\/div><\/div>\n

To create an app, run the following command:<\/p>\n

vue create gantt-<\/span>vue<\/div><\/div>\n

It will request some project info. You can just leave default answers and press the enter button for each question or select functions manually.<\/p>\n

Then you need to go to the app directory, install dependencies and run it.<\/p>\n

cd gantt-<\/span>vue<\/div><\/div>\n

If you use yarn, you need to call the following commands:<\/p>\n

yarn install
\nyarn serve<\/div><\/div>\n

If you use npm, you need to call the following commands:<\/p>\n

npm install
\nnpm run serve<\/div><\/div>\n

After these steps, the app should run on http:\/\/localhost:8080<\/strong><\/p>\n

\"vuejs-install\"<\/p>\n

Moving to Gantt Chart Part<\/h4>\n

Now we should get the dhtmlxGantt code. First of all, we need to stop the app by pressing ctrl+c<\/strong> in the command line in order to run the following command afterward:<\/p>\n

yarn add dhtmlx-<\/span>gantt --<\/span>save (<\/span>for<\/span> yarn)<\/span>
\nnpm install dhtmlx-<\/span>gantt --<\/span>save (<\/span>for<\/span> npm)<\/span><\/div><\/div>\n

Then, to add a Gantt chart to an application, we should create a component.<\/p>\n

So, we’ll start by creating a folder for the app components. Open the src folder and create components folder in it. Then, create GanttComponent.vue<\/strong> file in the components folder and put the following code into it:<\/p>\n

{<\/span>{<\/span> src\/<\/span>components\/<\/span>GanttComponent.vue<\/span> }<\/span>}<\/span><\/div><\/div>\n
<\/div>\n

 <\/p>\n