@tsparticles/vue3
Version:
Official tsParticles Vue.js 3.x Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js 2.x,
155 lines (128 loc) • 6.08 kB
Markdown
[](https://particles.js.org)
# @tsparticles/vue3
[](https://www.npmjs.com/package/@tsparticles/vue3) [](https://www.npmjs.com/package/@tsparticles/vue3) [](https://github.com/sponsors/matteobruni)
Official [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x component
[](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") <a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
## Installation
```shell script
yarn add @tsparticles/vue3
```
## Usage
```javascript
import Particles from "@tsparticles/vue3";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
createApp(App).use(Particles, {
init: async engine => {
// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
await loadSlim(engine); // or you can load the slim version from "tsparticles-slim" if don't need Shapes or Animations
},
});
```
### Demo config
```html
<template>
<div id="app">
<vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" />
<vue-particles
id="tsparticles"
:particlesLoaded="particlesLoaded"
:options="{
background: {
color: {
value: '#0d47a1'
}
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: 'push'
},
onHover: {
enable: true,
mode: 'repulse'
},
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40
},
push: {
quantity: 4
},
repulse: {
distance: 200,
duration: 0.4
}
}
},
particles: {
color: {
value: '#ffffff'
},
links: {
color: '#ffffff',
distance: 150,
enable: true,
opacity: 0.5,
width: 1
},
move: {
direction: 'none',
enable: true,
outModes: 'bounce',
random: false,
speed: 6,
straight: false
},
number: {
density: {
enable: true,
},
value: 80
},
opacity: {
value: 0.5
},
shape: {
type: 'circle'
},
size: {
value: { min: 1, max: 5 }
}
},
detectRetina: true
}"
/>
</div>
</template>
```
```javascript
const particlesLoaded = async container => {
console.log("Particles container loaded", container);
};
```
### TypeScript errors
If TypeScript returns error while importing/using Particles plugin try adding the following import before the previous
code:
```typescript
declare module "@tsparticles/vue3";
```
## Demos
The demo website is [here](https://particles.js.org)
<https://particles.js.org>
There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
<https://codepen.io/collection/DPOage>
## Migrating from Vue 2.x to Vue 3.x
If you are migrating your project from Vue 2.x to 3.x you need to these steps:
- Change the dependency from `@tsparticles/vue2` to `@tsparticles/vue3`
- Update the `node_modules` folder executing `npm install` or `yarn`
- Change the `use` function from `Vue.use(Particles, { init: /* omissis */ })`
to `createApp(App).use(Particles, { init: /* omissis */ })`.
The `<vue-particles />` tag syntax remains the same, so you don't need to do any additional action.