Animated Interactive Particle System For Vue.js – Vue ParticleJs

ParticleJs is a Vue.js component to generate an animated interactive particle system on the app.

Based on the particles.js library.

How to use it:

1. Install and import the Vue ParticleJs package.

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

2. Use the component in your templates.

<template>
  <div id="app">
  <div id='particle'></div>
    <VueParticle domId='particle' :config=myConfig/>
  </div>
</template>

3. Enable the particle system.

export default {
  name: "app",
  components: {
    VueParticle,
  },
  data: function() {
    return {
      myConfig:{
        // props here
      }
    };
  }
};

4. All default props to config the particle system.

particles: {
  color: '#fff',
  shape: 'circle',
  opacity: 1,
  size: 2.5,
  size_random: true,
  nb: 200,
  line_linked: {
    enable_auto: true,
    distance: 100,
    color: '#fff',
    opacity: 1,
    width: 1,
    condensed_mode: {
      enable: true,
      rotateX: 65000,
      rotateY: 65000
    }
  },
  anim: {
    enable: true,
    speed: 1
  },
  array: []
  },
  interactivity: {
    enable: true,
    mouse: {
      distance: 100
    },
    detect_on: 'canvas',
    mode: 'grab'
  },
  retina_detect: false,
  fn: {
    vendors:{
      interactivity: {}
    }
}

Preview:

Download Details:

Author: adedayojs

Live Demo: https://codesandbox.io/s/vue-template-v9i0r

Download Link: https://github.com/adedayojs/vue-particlejs/archive/master.zip

Official Website: https://angularscript.com/

Install & Download:

# Yarn
$ yarn add vue-particlejs

# NPM
$ npm install vue-particlejs --save