Standalone page support

[viniciusccarvalho]

Hi folks, thanks for this amazing library. My app is not using an SPA or running on npm, instead it is just a single html page. I have been using vue components via cdn so far, but I can't get this one to work . Is it not supported?

here's a snippet of my page script block:

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-apexcharts@1.4.1/dist/vue3-apexcharts.common.min.js"></script>
<script type="module">
        import { globals } from '/public/js/modules/global.js'
        import { api } from '/public/js/modules/api.js'
        import VueApexCharts from "vue3-apexcharts";

        const app = Vue.createApp({
            delimiters: ['${', '}'],
            data() {
                return {
                    pageStats :[]
                }
            },
            methods: {

            },
            mounted(){
                api.get("/api/stats/pages/review").then(response => {
                    this.pageStats = response.data
                    console.log(this.pageStats)
                })
            }
    });
        app.use(Quasar, VueApexCharts, {config: {}})
        app.config.globalProperties.$globals = globals
        app.mount('#q-app')

</script>

The vue3-apexcharts.common.min.js does not appear to export any module, I tried other files on cdn but none work.

Any suggestions on how to make this work?

Thanks

[christian-judt]

I had the very same problem and I only got it to work "UMD"-style by slightly editing the code of https://cdn.jsdelivr.net/npm/vue3-apexcharts@1.4.1/dist/vue3-apexcharts.common.js itself.

I 'just' had to:

• manually remove the entire webpack bootstrap
• replace all "external_commonjs_vue_commonjs2_vue_rootVue" with "Vue"
• replace all "external_root_ApexCharts_commonjs_apexcharts_commonjs2_apexcharts_default.a" with "ApexCharts" and
• add "window.Vue3ApexCharts = vue3_apexcharts;" to the very end

Although I would still very much prefer an out of the box support for this way to use ApexCharts with Vue3.

[christian-judt]

The corresponding file https://cdn.jsdelivr.net/npm/apexcharts@3.40.0/dist/apexcharts.js for the support of ApexCharts in Vue2 does seem to support loading it directly into the browser "UMD"-style.

Since Vue2 will most likely reach its end of life at December 31st, 2023 (see https://v2.vuejs.org/lts/) and thereby many users of the package "vue-apexcharts" will eventually migrate to the package "vue3-apexcharts", the possibility to use this package "UMD"-style like the package "vue-apexcharts" should be added relatively soon.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.