DEV Community

Cover image for A Vue.js particle background component that makes your page sparkle

Posted on

A Vue.js particle background component that makes your page sparkle


A vue.js particles animation background component

Online demo


npm install --save particles-bg-vue


Method 1: Import and use in the component

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

import { ParticlesBg } from "particles-bg-vue";
export default {
  name: "App",
  components: {

Method 2: Use it globally

import VueParticlesBg from "particles-bg-vue";


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

Parameter Description

<particles-bg color="#ff0000" num=200 type="circle" :bg={true} />

* type - Is the type of particle animation

Is the type of particle animation, random is a random selection. You are also free to customize use custom.


* num - The number of particles emitted each time, generally not set

* color - The background color or particle color of the particle scene

Notice: which should be an array under type=color

* canvas - canvas dom style


* bg - Set to html background

Is set the following properties

position: "absolute",
zIndex: -1,
top: 0,
left: 0

About Custom

You can use type="custom" to achieve a higher degree of freedom for the particle background.

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

  data: function() {
    return {
      config: {
        num: [4, 7],
        rps: 0.1,
        radius: [5, 40],
        life: [1.5, 3],
        v: [2, 3],
        tha: [-30, 30],
        body: icon,
        alpha: [0.6, 0],
        scale: [0.1, 0.4],
        position: "all",
        cross: "dead",
        random: 15


Top comments (1)

lindelof profile image