CODEWITHSUNDEEP
vue.jsnuxt.jsvuejs3nuxt3.js
Kiril Lukiyan
Kiril Lukiyan

Reputation: 187

Using Vue3 vue-ganttastic plugin in Nuxt3

I need help using vue-ganttastic. It looks very good. But I can't make it work with Nuxt :frowning: I didn't have problems adopting other Vue3 modules into nuxt (like jodit or echarts). I even adopted vanilla js mgt ( microsoft draft toolkit). however I spent lots of time with this ganttastic without success.
Please help

Upvotes: 1

Views: 832

Answers (1)

Reagan
Reagan

Reputation: 2377

Here is the basic configuration on Nuxt3. Working with no issues based on the basic example from their documentation https://github.com/zunnzunn/vue-ganttastic#quickstart

npm install @infectoone/vue-ganttastic

To globally install it, you need to add it as a plugin.

ganttastic.client.ts

import ganttastic from '@infectoone/vue-ganttastic'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(ganttastic)
})

In the app.vue

<template>
  <div>
    <ClientOnly>
      <g-gantt-chart
        chart-start="2021-07-12 12:00"
        chart-end="2021-07-14 12:00"
        precision="hour"
        bar-start="myBeginDate"
        bar-end="myEndDate"
      >
        <g-gantt-row label="My row 1" :bars="row1BarList" />
        <g-gantt-row label="My row 2" :bars="row2BarList" />
      </g-gantt-chart>
    </ClientOnly>
  </div>
</template>

<script setup>
const row1BarList = ref([
  {
    myBeginDate: '2021-07-13 13:00',
    myEndDate: '2021-07-13 19:00',
    ganttBarConfig: {
      // each bar must have a nested ganttBarConfig object ...
      id: 'unique-id-1', // ... and a unique "id" property
      label: 'Lorem ipsum dolor',
    },
  },
]);
const row2BarList = ref([
  {
    myBeginDate: '2021-07-13 00:00',
    myEndDate: '2021-07-14 02:00',
    ganttBarConfig: {
      id: 'another-unique-id-2',
      hasHandles: true,
      label: 'Hey, look at me',
      style: {
        // arbitrary CSS styling for your bar
        background: '#e09b69',
        borderRadius: '20px',
        color: 'black',
      },
    },
  },
]);
</script>

Hope that helps you.

Working example here https://stackblitz.com/edit/nuxt-starter-5gc98q?file=app.vue

Upvotes: 1

Related Questions