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