Particles Bg Vue Save

A vue.js particles animation background component

Project README


NPM JavaScript Style Guide

A vue.js particles animation background component. Use it to make your website look cool.

Check it out if you want to use it in React


This project refers to the source code of the Proton official website, and proton's online demo. I packaged it into a vue.js component. Thanks to the great author.

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

Similar projects

Maybe you will like these two projects, they will also make your page flourish


Open Source Agenda is not affiliated with "Particles Bg Vue" Project. README Source: lindelof/particles-bg-vue

Open Source Agenda Badge

Open Source Agenda Rating