Is it possible to make a library of Vue highcharts components?

Question

I am just desperate for an answer but there's a hope to find the answer here.

I Used following stuff:

"vite": "^2.7.13",
"highcharts": "^9.3.3",
"highcharts-vue": "^1.4.0"

I would like to make a library of vue components including highcharts charts. I tried to make BarChart with rollup config like this:

import vue from "rollup-plugin-vue";
import typescript from "rollup-plugin-typescript2";
import resolve from "rollup-plugin-node-resolve";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import cleaner from "rollup-plugin-cleaner";
import commonjs from "@rollup/plugin-commonjs";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import image from '@rollup/plugin-image';

const plugins = [
  resolve(),
  typescript({
    check: false,
    useTsconfigDeclarationDir: true,
  }),
  vue({
    preprocessStyles: true,
    css: false,
    template: {
      isProduction: true,
      
    },
    
  }),
  peerDepsExternal(),
  commonjs(),
  postcss({
    extensions: [".css"],
  }),
  image(),
];


const AppChart = [
  {
    input: "./demo-v3/src/components/Chart.vue",
    output: [
      {
        format: "esm",
        file: "./demo-v3/lib/UI/AppChart/index.js",
      },
    ],
    external: ["@vue"],
    plugins: [...plugins,   commonjs({
      namedExports: {
        "node_modules/highcharts-vue/dist/highcharts-vue.min.js": ["Chart"],
      },
    }),],
    
  },
];

const config = [...AppChart];

export default config;

My component BarChart.vue looks like this:

<template>
  <div class="chart-wrapper">
    <Chart :chart-options="lineChartOptions" />
  </div>
</template>

<script setup lang="ts">
import Chart from "./CommonChart.vue";

const props = defineProps({
  chartData: {
    type: Object,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {},
  },
});

const exportingOptions = () => {
  return {
    buttons: {
      contextButton: {
        menuItems: [
          "viewFullscreen",
          "separator",
          "downloadPNG",
          "downloadPDF",
          "printChart",
          "separator",
          "downloadCSV",
          "downloadXLS",
        ],
      },
    },
  };
};

let lineChartOptions = {
  ...props.chartData,
  exporting: exportingOptions(),
  credits: { enabled: false },
};
</script>

<style lang="scss">
.chart-wrapper {
  padding: 15px;
  width: 1140px;
  height: 440px;
  border: 1px solid #c4c4c4;
}
</style>

And there is a common chart component looks like this:

<template>
  <highcharts class="hc" :options="chartOptions" />
</template>

<script setup lang="ts">
import { Chart as highcharts } from "highcharts-vue";
import Highcharts from "highcharts";

const props = defineProps({
  chartOptions: {
    type: Object,
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    default: () => {},
  },
});
</script>

It works when I use BarChart and doesn't work after bundling with rollup.

What can I do wrong?

Answer 1

my colleague found this guide with the setup which is worked for me.

I leave it here for who can't find the same: https://dev.to/shubhadip/vue-3-component-library-270p

UPDATED: https://devsday.ru/blog/details/73660 - vite can build lib out-of-box. I haven't tried this way but suspect it works well. As always, I should look throw documentation carefully