Vue component not loaded with Plugin syntax

Question

I have this Vue plugin that is not working:

import _Vue from "vue";
import particles from "./Particles.vue";

const VueParticles = (Vue: typeof _Vue, options: unknown) => {
    _Vue.component('Particles', particles);
};

export { particles as ParticlesComponent };
export default VueParticles;

It builds, but if I try to use it, it doesn't load the component and the app returns me this error:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src/App.vue

And I load the plugin like this:

import Particles from "particles.vue";

Vue.use(Particles);

But if I load the component using the Vue.component syntax, it's working, like this:

import { ParticlesComponent } from "particles.vue";

Vue.component("Particles", ParticlesComponent);

This is the template I'm using:

<Particles id="tsparticles" :options="options" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded"/>

You can try to replicate the issue following these steps:

Clone tsParticles dev branch with: git clone https://github.com/matteobruni/tsparticles.git --branch dev
Run yarn && npx lerna bootstrap && npx lerna run build
Go to demo/vue folder
Run yarn serve and open http://localhost:8080, everything should work (an animated background should start animating)
Edit src/App.vue commenting the working Vue.component and restoring the Vue.use
Rerun yarn serve and open http://localhost:8080, the background this time is not appearing

I just switched from yarn workspaces to standard yarn for big issues with the node dependencies in the whole project

I don't understand why it broke like this.

I also tried an external Vue.js app instead of the demo one inside the project but nothing changed.

The component is using vue-property-decorator but I tried switching to the Vue.extend syntax and nothing changed so I reverted to the previous class code.

It's just a type, I changed it to Vue and renamed the variable name to vue but nothing has changed — Caelan
– Caelan, Commented Nov 15, 2020 at 0:58

tony19 · Accepted Answer · 2022-07-15 22:45:53Z

1

The plugin file should be exporting an object with an install function, but your plugin just exports the function itself. Also, the install function's argument should be used in the body (i.e., Vue is the argument name, so the body should contain Vue.component()).

The fix should look like this:

const VueParticles = {
  install(Vue: typeof _Vue, options: unknown) {
    Vue.component('Particles', particles);
  }
};

export default VueParticles;

edited Jul 15, 2022 at 22:45

answered Nov 14, 2020 at 4:17

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Caelan Over a year ago

Using the dev branch?

Caelan Over a year ago

I solved the build errors and it didn't work in a clean install. I tried copying the Vue component and demo folders away from the project, but same error if I use the plugin.

tony19 Over a year ago

Your plugin code still uses the Vue import instead of the vue argument.

Caelan Over a year ago

Thanks!! Using the argument totally fixed it!

Collectives™ on Stack Overflow

Vue component not loaded with Plugin syntax

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related