[solved] Global custom component registration vs per-file registration

[rconstantine]

I understand how to register a component on a per-file basis. I’ve got VueApexCharts working on a particular vue file. I also understand to some degree how to create plugins as I have for axios, casl, vuelidate, and vue-observe-visibility. However, none of those supplied VueJS components like VueApexCharts does. I was under the assumption that if I can globally register the component, then I won’t have to import and register on each vue file.

My plugin file so far looks like this:

import VueApexCharts from 'vue-apexcharts'

export default ({ app, router, store, Vue }) => {
  Vue.use(VueApexCharts)
  console.log('components', app.components)
}

In place of the console log, I have tried to set the component of the app like this:

app.components= {
    apexcharts: VueApexCharts,
  }

but that doesn’t work. I’ve tried a few variations with no luck.

I have read, and re-read the docs on plugins about 6 times, and also looked around here on the forum and read a couple dozen articles. Most related to components were of the per-file variety and the ones on global registration pointed to the docs or were for much older versions and didn’t work.

I’m sure there is something small I’m not getting. Any pointers, here?

Thanks!

[rconstantine]

Why do I always find the answer just after I post here?

import VueApexCharts from 'vue-apexcharts'

export default ({ app, router, store, Vue }) => {
  Vue.use(VueApexCharts)
  Vue.component('apexcharts', VueApexCharts)
}

[s.molinari]

It’s because writing things down get’s you thinking in different ways than if you were looking at a code editor. In other words, it get’s your mind less off the code and more about writing and explaining the answer to the question, “what the heck am I trying to do?”. It happens to me all the time!

Scott

[s.molinari]

Also, I’ve never registered a component globally in Quasar, but is “Vue.use” needed for that?

Edit: Nevermind. I see it is a Vue plugin. Glad you got it working!

Edit2: And wow. Apex Charts looks pretty damn good. me bookmarking for future reference

Edit3: Looking at Apex Charts, this could be another example of user shared components, where different types of charts are made as chart components for Quasar. I’m thinking of those dynamic examples shown in the demos where a button is needed.

Scott