Create Attractive Backgrounds Using Particle Animations - particles-bg-vue

Install & Download:

# NPM
$ npm install particles-bg-vue --save

Description:

A Vue.js component that provides 10+ particle animations for creating attractive backgrounds on the applications.

Particle Animations included:

color
ball
lines
thick
circle
cobweb
polygon
square
tadpole
fountain
random
custom

How to use it:

1. Install, import and register the component.

import { ParticlesBg } from "particles-bg-vue";
export default {
  name: "App",
  components: {
    ParticlesBg
  }
};
// or globally
import VueParticlesBg from "particles-bg-vue";
Vue.use(VueParticlesBg);

2. Insert the component into your template and specify the animation type you want to use.

<particles-bg type="lines" :bg="true" />

3. To create a custom particle animation, follow these steps:

<particles-bg type="custom" :config="config" :bg="true"/>

data: function() {
  return {
    config: {
      // configs here
    }
  };
}

4. Default props.

type: {
  type: String,
  required: false,
  default: "random"
},
num: [String, Number],
bg: Boolean,
color: String,
config: Object,
canvas: Object,
globalCompositeOperation: String