Vue.js 在 Nuxt3 中使用 Vue3 vueganntastic 插件

发布于07月31日

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

推荐答案

以下是Nuxt3的基本配置.根据他们文档中的基本示例，不会出现任何问题 https://github.com/zunnzunn/vue-ganttastic#quickstart个

npm install @infectoone/vue-ganttastic个

要全局安装它，您需要将其添加为插件.

ganttastic.client.ts个

import ganttastic from '@infectoone/vue-ganttastic'

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

在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>

希望这对你有帮助.

此处的工作示例 https://stackblitz.com/edit/nuxt-starter-5gc98q?file=app.vue个