Package Exports
- @tsparticles/vue2
- @tsparticles/vue2/dist/vue2-particles.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tsparticles/vue2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@tsparticles/vue2
Official tsParticles VueJS component
Installation
yarn add @tsparticles/vue2Usage
import Particles from "@tsparticles/vue2";
//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.
Vue.use(Particles, {
init: async engine => {
// await loadFull(engine);
await loadSlim(engine);
},
});Demo config
<template>
<div id="app">
<vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" url="http://foo.bar/particles.json" />
<!-- or -->
<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'
},
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>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 "@tsparticles/vue2";Demos
The demo website is here
There's also a CodePen collection actively maintained and updated here