Modular Components - Githubissues

As the title suggests, is it possible to modularize and import chart components? For example, like ECharts, where components such as TooltipComponent, DataZoomComponent, ToolboxComponent, etc., are split into separate modules.

Details:

✓ 46 modules transformed.
dist/index.html                                        0.60 kB │ gzip:   0.37 kB
dist/assets/_error-BQYW7aSu.css                        1.06 kB │ gzip:   0.33 kB
dist/assets/_layout-lO9ExtG1.css                       1.83 kB │ gzip:   0.48 kB
dist/assets/index-BEcjb3zM.css                        22.38 kB │ gzip:   3.27 kB
dist/assets/_page-B-_x0Hwk.css                       101.66 kB │ gzip:  11.30 kB
dist/assets/_plugin-vue_export-helper-DlAUqK2U.js      0.09 kB │ gzip:   0.10 kB
dist/assets/_page-DgE_RN2_.js                          0.22 kB │ gzip:   0.20 kB
dist/assets/_layout-CrLyqFLS.js                        0.73 kB │ gzip:   0.40 kB
dist/assets/_error-BHDCiFOv.js                         1.20 kB │ gzip:   0.67 kB
dist/assets/_page-CrPqC2Ak.js                          2.40 kB │ gzip:   1.01 kB
dist/assets/_page-CP02znN6.js                          3.10 kB │ gzip:   1.34 kB
dist/assets/purify.es-00041b4f-DkpJcRzB.js            21.96 kB │ gzip:   8.74 kB
dist/assets/index-WB9U1kF9.js                         94.78 kB │ gzip:  37.43 kB
dist/assets/index.es-5fba9ad2-7x3Z5Lsn.js            150.56 kB │ gzip:  51.51 kB
dist/assets/index-fb63a0e3-gAAo2KeB.js             1,766.81 kB │ gzip: 408.37 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 2.41s

Highlight:

dist/assets/index-fb63a0e3-gAAo2KeB.js             1,766.81 kB │ gzip: 408.37 kB

Code:

<script lang="ts" setup>
import 'vue-data-ui/style.css';
import { VueDataUi } from 'vue-data-ui';
</script>

<template>
  <VueDataUi component="VueUiDonut" :dataset :config />
</template>

Below is the modular syntactic sugar provided by echarts:

<script lang="ts" setup>
import EChart from 'vue-echarts';
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { LegendComponent, GridComponent, TooltipComponent } from 'echarts/components';
import { SVGRenderer } from 'echarts/renderers';

use([
  BarChart,
  LegendComponent, GridComponent, TooltipComponent,
  SVGRenderer,
]);
</script>

<template>
  <EChart :option />
</template>

Below is the modular syntactic sugar provided by swiper:

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Scrollbar } from 'swiper/modules';
</script>

<template>
  <Swiper :modules="[Scrollbar]">
    <SwiperSlide />
  </Swiper>
</template>

graphieros / vue-data-ui

Modular Components #60