Can't get it to work with Options API

[KayElliot]

Hi there,

I love the examples used for this plugin, but when I copy / paste the example code from https://vue-data-ui.graphieros.com/docs#vue-ui-xy I still can't get it to run at all.

I'm using the VueJS Options API, and have to load Vue-Data-Ui from a CDN: https://cdn.jsdelivr.net/npm/vue-data-ui@1.9.4/+esm
I've got the components included in my Vue app, and the data is present. However, in my DOM-template, nothing happens.
Just to be sure, I've also run a test with a webpack generated version of vue-data-ui combined with the files that import it, to no avail.

My DevTools says the following:

• TypeError: Cannot read properties of null (reading 'refs')
• vue.global.prod.js?cacheversion=231123IuKnytYH:1 TypeError: Cannot read properties of null (reading 'emitsOptions')
• TypeError: Cannot read properties of null (reading 'refs')

From the top of my head, the error DevTools gives me tells me a variable is missing or not available.
However, the dataset is filled with the array from the DOCS page, as well as the defaultOptions.
I've logged both variables and they return exactly what is expected.

The component on my page is loaded with:
<vue-ui-xy :dataset="dataset" :config="defaultConfig" />

AppComponent.js

import { VueUiXy } from 'https://cdn.jsdelivr.net/npm/vue-data-ui@1.9.4/+esm'



const defaultConfig = {};  // Filled with config from DOCS

let dataset = [
    {
        name: "Series 1",
        series: [-55, -34, -21, -13, -8, -5, -3, -2, -1, -1, 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55],
        type: "line",
        color: "rgb(95,139,238)",
    }
];

let HistoricDataGraph = {
    props:{
        orgid : {type : Number, required: true},
        invoices : Object,
    },
    data(){
        return  {   
            dataset : dataset,
            defaultConfig: defaultConfig,
            show : {
                invoiceTotal : false,
                installationCount : true,
            },

            datasets : {
                xTime_yInvoiceTotal : [],
                xTime_yInstallationCount : [],
            },

        }
    },

[graphieros]

Hey there,

thanks for trying the lib:)
What version of Vue are you using ?
This library is designed to work with Vue 3, and the error you mention 'TypeError: Cannot read properties of null (reading 'refs')'' seems to indicate you are using Vue 2.

[KayElliot]

Hey @graphieros , thanks for responding so quickly.

We're using Vue 3.2.45 vue.global.prod.js

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.global.prod.js"></script>

I ran another test with <vue-ui-skeleton :config="skeletonConfig" /> and that does seem to run without problems.
I also tried switching to <vue-ui-donut :dataset="dataset" :config="donutConfig"></vue-ui-donut> but I get the same errors again.

It seems that the errors get triggered whenever I sent through a data array through :dataset, if I remove the v-bind attribute and replace it with a mere "dataset=" (so without the colon) the errors disappear, but the component isn't rendered either.

[KayElliot]

P.S.

Just to be sure, I upgraded to Vue 3.3.8.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.8/vue.global.prod.min.js"></script>

But the problem still persists.

[graphieros]

Do you have the same issue when passding hardcoded dataset directly to the component ? That's not a solution of course, just a way to be sure the data is sent to the component.
<vue-ui-xy :dataset=''[ { name: 'Series 1', series: [-55, -34, -21, -13, -8, -5, -3, -2, -1, -1, 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55], type: "'ine', color: 'rgb(95,139,238)', } ]" />

[graphieros]

I am not that familiar with using Vue through the CDN, and did not cover this installation process in the docs yet. I'm trying to reproduce the error you are getting. I'm sorry I don't have a solution right now, will keep looking.

[KayElliot]

I will try that first thing in the morning tomorrow. If we manage to get it working, I'll write a CDN installation guide for you, covering all the steps to integrate vue-data-ui with the Vue Options API 👍

[graphieros]

The issue is not related to the use of the options API. Components with dataset props render flawlessly in the context of a regular package install.

The issue appears to be related to the library build which is importing from "vue". The build bundle does not include Vue: it is an external dependency, since package users will install the library in a context where Vue is already installed. When using Vue through package install, it finds the current instance of Vue and it works ok. However when using a CDN, the Vue instance conflicts. I'm trying to see if there is a way to make it work on the library level.

[KayElliot]

Wow, great digging there! I'll try to brute force some stuff to get it to work on my end, using your suggestion. This is my main project for today so I'll be actively responding.

[KayElliot]

Would it make sense to create a separate bundle that imports vue from a CDN?
I've spend some time trying to integrate the Vue package but it's a lot of hassle trying to integrate.

[KayElliot]

Or, is it possible for you to release a second parallel version with integrated Vue alltogether?

[graphieros]

I would rather have one version that works in all cases if possible.
However I tried to run a local build with Vue included (removing build.rollupOptions.external from vite.config), but that did not work.

[graphieros]

I posted a stackoverflow question to get some help : https://stackoverflow.com/questions/77569093/vue-3-cdn-cant-include-third-party-component-library-also-from-a-cdn

[graphieros]

Still no progress on this issue to this day.