2.12.0 • Published 9 months ago
vue2-particles v2.12.0
vue2-particles
Official tsParticles VueJS component
Installation
yarn add vue2-particles
Usage
import Particles from "vue2-particles";
Vue.use(Particles);
Demo config
<template>
<div id="app">
<vue-particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
url="http://foo.bar/particles.json"
/>
<!-- or -->
<vue-particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="{
background: {
color: {
value: '#0d47a1'
}
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: 'push'
},
onHover: {
enable: true,
mode: 'repulse'
},
resize: true
},
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,
outMode: 'bounce',
random: false,
speed: 6,
straight: false
},
number: {
density: {
enable: true,
area: 800
},
value: 80
},
opacity: {
value: 0.5
},
shape: {
type: 'circle'
},
size: {
value: { min: 1, max: 5 },
}
},
detectRetina: true
}"
/>
</div>
</template>
//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.
const particlesInit = async engine => {
//await loadFull(engine);
await loadSlim(engine);
};
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:
declare module "vue2-particles";
Demos
The demo website is here
There's also a CodePen collection actively maintained and updated here
2.11.0
10 months ago
2.12.0
9 months ago
2.10.0
11 months ago
2.9.0
1 year ago
2.8.0
1 year ago
2.9.2
1 year ago
2.9.1
1 year ago
2.9.3
1 year ago
2.5.0
2 years ago
2.4.0
2 years ago
2.7.0
1 year ago
2.5.2
1 year ago
2.6.0
1 year ago
2.5.1
2 years ago
2.7.1
1 year ago
2.5.3
1 year ago
2.3.0
2 years ago
2.3.2
2 years ago
2.3.1
2 years ago
2.3.3
2 years ago
2.2.4
2 years ago
2.2.1
2 years ago
2.1.2
2 years ago
2.2.0
2 years ago
2.1.1
2 years ago
2.2.3
2 years ago
2.1.4
2 years ago
2.2.2
2 years ago
2.1.3
2 years ago
2.1.0
2 years ago
2.0.6
2 years ago
2.0.5
2 years ago
2.0.4
2 years ago
1.43.1
2 years ago
1.43.0
2 years ago
1.42.4
2 years ago
1.42.3
2 years ago
1.42.2
2 years ago
2.0.3
2 years ago
1.42.1
2 years ago