docs are incorrect

[OguzcanKarakoc]

The docs state that you have to do

import Particles from "vue3-particles";
const app = createApp(App).use(Particles)

however this shows an error from ts.

(alias) const Particles: (app: App, options: unknown) => void
import Particles
Argument of type '(app: App<any>, options: unknown) => void' is not assignable to parameter of type 'Plugin_2<[]>'.
  Type '(app: App<any>, options: unknown) => void' is not assignable to type '((app: App<any>) => any) & { install?: ((app: App<any>) => any) | undefined; }'.
    Type '(app: App<any>, options: unknown) => void' is not assignable to type '(app: App<any>) => any'.ts(2345)

The proper way to do it is:

import Particles from "vue3-particles";

const app = createApp(App)

Particles(app, {})

because the function Particles seems to take care of it,

src/components/index.ts

import type { App } from "vue";
import particles from "./Particles.vue";

const VueParticles = (app: App, options: unknown) => {
    app.component("Particles", particles);
};

export { particles as ParticlesComponent };
export default VueParticles;

Also it would be nice to add that this library requires tsparticles

npm i tsparticles

[matteobruni]

The docs state that you have to do

import Particles from "vue3-particles";
const app = createApp(App).use(Particles)

however this shows an error from ts.

(alias) const Particles: (app: App, options: unknown) => void
import Particles
Argument of type '(app: App<any>, options: unknown) => void' is not assignable to parameter of type 'Plugin_2<[]>'.
  Type '(app: App<any>, options: unknown) => void' is not assignable to type '((app: App<any>) => any) & { install?: ((app: App<any>) => any) | undefined; }'.
    Type '(app: App<any>, options: unknown) => void' is not assignable to type '(app: App<any>) => any'.ts(2345)

The proper way to do it is:

import Particles from "vue3-particles";

const app = createApp(App)

Particles(app, {})

because the function Particles seems to take care of it,

src/components/index.ts

import type { App } from "vue";
import particles from "./Particles.vue";

const VueParticles = (app: App, options: unknown) => {
    app.component("Particles", particles);
};

export { particles as ParticlesComponent };
export default VueParticles;

Also it would be nice to add that this library requires tsparticles

npm i tsparticles

There's a type issue in the latest vue 3.x version that break compatibility, I will publish an update when ready.

About tsparticles dependency, it's not mandatory since you can install any other preset or tsparticles-slim or add plugins manually.

[emerg]

Hi @matteobruni, I'm also having a hard time following the docs. I think that it would be helpful to make them a little more clear in terms of where/what files to add some of this code to. For instance, as a plugin file and then configured throught the nuxt.config.ts file? I'm having a hard time getting things to work, but I feel I am missing something simple. I am using Vue/Nuxt 3. (nuxt 3.5.2 & vue3-particles 2.10.1) I was getting a page with the particles component, but no particles, and no error logs to understand why it wasnt working. Any help would be deeply appreciated!

[matteobruni]

Hi @matteobruni, I'm also having a hard time following the docs. I think that it would be helpful to make them a little more clear in terms of where/what files to add some of this code to. For instance, as a plugin file and then configured throught the nuxt.config.ts file? I'm having a hard time getting things to work, but I feel I am missing something simple. I am using Vue/Nuxt 3. (nuxt 3.5.2 & vue3-particles 2.10.1) I was getting a page with the particles component, but no particles, and no error logs to understand why it wasnt working. Any help would be deeply appreciated!

This is unrelated to this issue, please open a new one. This issue was solved with the release of 2.10.