Vue.js component for making cool backgrounds with flying particles

vue-particles

Creating a beautiful landing pages and pretty websites in general is no easy task and so many are looking for something unique, something a good web designer can offer.

If you are looking into building something simple yet elegant keep in mind that the vue-particles component is out there, offering a nice solution or alternative to a static background. Below you can find a usage example using the props offered to make the floating particles unique.

Vue.js component for particles backgrounds

Example

Install the plugin via yarn or npm :

yarn add vue-particles

Import it in your main.js file

import VueParticles from 'vue-particles' Vue.use(VueParticles)

Use in your templates:

<vue-particles color="#7B1FA2" :particleOpacity="0.9" :particlesNumber="120" shapeType="polygon" :particleSize="6" linesColor="#00acd6" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="100" :moveSpeed="6" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="repulse" > </vue-particles>

The result:

The vue-particles plugin has a demo & docs page (explanations for the props), along with a GitHub page where you can give a star and take a look at the source code.

At least in my opinion