Vue ParticleJs

A lightweight Vue library for creating particles. (Based On particles.js).

Feel free to submit issues and feature requests here.

Full documentation and examples

Table of Contents

• Installation
• Importation
• Usage
• Development
• License

Installation

npm install vue-particlejs

or if you prefer yarn

yarn add vue-particlejs

Importation

Vue ParticleJs can be imported using two methods

• Globally
• Locally

Global

You may install Vue Particle globally:

import Vue from 'vue';
import VueParticle from 'vue-particlejs';

Vue.use(VueParticle);

This will make <VueParticle> component available to all components within your Vue app.

Local

Include the particle directly into your component using import:

import VueParticle from 'vue-particlejs';

export default {
  ...
  components: {
    VueParticle
  },
  data: function() {
    return {}
  }
}

Usage

Once the VueParticle components is imported into your app globally or imported, it can be used in templates in the following manner:

• Note

  The component takes two props

1. The "domId" which is the id of the element you want to use the particles on
2. The config Object more details here

<template>
  <div id="app">
  <div id='particle'></div>
    <VueParticle domId='particle' :config=particleConfig/>
    /* Place other components where you like*/
  </div>
</template>

<script>
import VueParticle from 'vue-particlejs

export default {
  name: "app",
  components: {
    VueParticle,
  },
  data: function() {
    return {
        particleConfig:{
        particles: {
          number: { value: 80, density: { enable: true, value_area: 800 } },
          color: { value: "#ffffff" },
          shape: {
            type: "circle",
            stroke: { width: 0, color: "#000000" },
            polygon: { nb_sides: 5 },
            image: { src: "img/github.svg", width: 100, height: 100 }
          },
          opacity: {
            value: 0.5,
            random: false,
            anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
          },
          size: {
            value: 3,
            random: true,
            anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
          },
          line_linked: {
            enable: true,
            distance: 150,
            color: "#ffffff",
            opacity: 0.4,
            width: 1
          },
          move: {
            enable: true,
            speed: 6,
            direction: "none",
            random: false,
            straight: false,
            out_mode: "out",
            bounce: false,
            attract: { enable: false, rotateX: 600, rotateY: 1200 }
          }
        },
        interactivity: {
          detect_on: "canvas",
          events: {
            onhover: { enable: true, mode: "repulse" },
            onclick: { enable: true, mode: "push" },
            resize: true
          },
          modes: {
            grab: { distance: 400, line_linked: { opacity: 1 } },
            bubble: {
              distance: 400,
              size: 40,
              duration: 2,
              opacity: 8,
              speed: 3
            },
            repulse: { distance: 200, duration: 0.4 },
            push: { particles_nb: 4 },
            remove: { particles_nb: 2 }
          }
        },
        retina_detect: true
        }
            };
        }
};
  
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>

  

Configuration

The second props which the vue particle component takes in is the configuration and there are rules to be followed. Since the VueParticle Component is just a wrapper around particlejs package, therefore all configuration options that apply to particlejs also applies to it

Options

key | option type / notes | example ----|---------|------ particles.number.value | number | 50 particles.number.density.enable | boolean | true / false particles.number.density.value_area | number | 750 particles.color.value | HEX (string) RGB (object) HSL (object) array selection (HEX) random (string) | "#b61924" {r:182, g:25, b:36} {h:356, s:76, l:41} ["#b61924", "#333333", "999999"] "random" particles.shape.type | string array selection | "circle" "edge" "triangle" "polygon" "star" "image" ["circle", "triangle", "image"] particles.shape.stroke.width | number | 2 particles.shape.stroke.color | HEX (string) | "#222222" particles.shape.polygon.nb_slides | number | 5 particles.shape.image.src | path link svg / png / gif / jpg | "assets/img/yop.svg" "http://mywebsite.com/assets/img/yop.png" particles.shape.image.width | number (for aspect ratio) | 100 particles.shape.image.height | number (for aspect ratio) | 100 particles.opacity.value | number (0 to 1) | 0.75 particles.opacity.random | boolean | true / false particles.opacity.anim.enable | boolean | true / false particles.opacity.anim.speed | number | 3 particles.opacity.anim.opacity_min | number (0 to 1) | 0.25 particles.opacity.anim.sync | boolean | true / false particles.size.value | number | 20 particles.size.random | boolean | true / false particles.size.anim.enable | boolean | true / false particles.size.anim.speed | number | 3 particles.size.anim.size_min | number | 0.25 particles.size.anim.sync | boolean | true / false particles.line_linked.enable | boolean | true / false particles.line_linked.distance | number | 150 particles.line_linked.color | HEX (string) | #ffffff particles.line_linked.opacity | number (0 to 1) | 0.5 particles.line_linked.width | number | 1.5 particles.move.enable | boolean | true / false particles.move.speed | number | 4 particles.move.direction | string | "none" "top" "top-right" "right" "bottom-right" "bottom" "bottom-left" "left" "top-left" particles.move.random | boolean | true / false particles.move.straight | boolean | true / false particles.move.out_mode | string (out of canvas) | "out" "bounce" particles.move.bounce | boolean (between particles) | true / false particles.move.attract.enable | boolean | true / false particles.move.attract.rotateX | number | 3000 particles.move.attract.rotateY | number | 1500 interactivity.detect_on | string | "canvas", "window" interactivity.events.onhover.enable | boolean | true / false interactivity.events.onhover.mode | string array selection | "grab" "bubble" "repulse" ["grab", "bubble"] interactivity.events.onclick.enable | boolean | true / false interactivity.events.onclick.mode | string array selection | "push" "remove" "bubble" "repulse" ["push", "repulse"] interactivity.events.resize | boolean | true / false interactivity.events.modes.grab.distance | number | 100 interactivity.events.modes.grab.line_linked.opacity | number (0 to 1) | 0.75 interactivity.events.modes.bubble.distance | number | 100 interactivity.events.modes.bubble.size | number | 40 interactivity.events.modes.bubble.duration | number (second) | 0.4 interactivity.events.modes.repulse.distance | number | 200 interactivity.events.modes.repulse.duration | number (second) | 1.2 interactivity.events.modes.push.particles_nb | number | 4 interactivity.events.modes.push.particles_nb | number | 4 retina_detect | boolean | true / false

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

The Particle has to be configured in the same manner as you configure particle.js if you are familiar with it.

Acknowledgement

This Whole package is made possible because of Particles.js Created by Vincent Garreau