vue-particlejs

KO | EN

gitlite — search

#python #react #ai #typescript #golang #android #machine-learning #rust #linux #windows #cli #kubernetes #ios #open-source

(★ 13)

Vue.js implementation of paerticle.js. (Discontinued)

vue-particlejs Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue ParticleJs

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

**Feel free to submit issues and feature requests [here](https://github.com/adedayojs/vue-particlejs/issues)**.

**[Full documentation and examples](https://github.com/adedayojs/vue-particlejs/)**

## Table of Contents
- [Live Demonstration](#demonstration)
- [Installation](#installation)
- [Importation](#importation)
- [Usage](#usage)
- [Development](#development)
- [License](#license)

##  Demonstration
The live demonstration of the project in codesandbox can be viewed [Here](https://codesandbox.io/s/vue-template-v9i0r)

## Installation

``` bash
npm install vue-particlejs
```

or if you prefer yarn

``` bash
yarn add vue-particlejs
```

## Importation

Vue ParticleJs can be imported using two methods
- [Globally](#global)
- [Locally](#local)

### Global

You may install Vue Particle globally:

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

Vue.use(VueParticle);
```
This will make **&lt;VueParticle&gt;** component available to all components within your Vue app.

### Local

Include the particle directly into your component using import:

``` js
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](#configuration)

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

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>

```

### 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](https://github.com/VincentGarreau/particles.js)** 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) <br /> RGB (object) <br /> HSL (object) <br /> array selection (HEX) <br /> random (string) | `"#b61924"` <br /> `{r:182, g:25, b:36}` <br />  `{h:356, s:76, l:41}` <br /> `["#b61924", "#333333", "999999"]` <br /> `"random"`
`particles.shape.type` | string <br /> array selection | `"circle"` <br /> `"edge"` <br /> `"triangle"` <br /> `"polygon"` <br /> `"star"` <br /> `"image"` <br /> `["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 <br /> svg / png / gif / jpg | `"assets/img/yop.svg"` <br /> `"http://mywebsite.com/assets/img/yop.png"`
`particles.shape.image.width` | number <br />(for aspect ratio) | `100`
`particles.shape.image.height` | number <br />(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"` <br /> `"top"` <br /> `"top-right"` <br /> `"right"` <br /> `"bottom-right"` <br /> `"bottom"` <br /> `"bottom-left"` <br /> `"left"` <br /> `"top-left"`
`particles.move.random` | boolean | `true` / `false`
`particles.move.straight` | boolean | `true` / `false`
`particles.move.out_mode` | string <br /> (out of canvas) | `"out"` <br /> `"bounce"`
`particles.move.bounce` | boolean <br /> (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 <br /> array selection | `"grab"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["grab", "bubble"]`
`interactivity.events.onclick.enable` | boolean | `true` / `false`
`interactivity.events.onclick.mode` | string <br /> array selection | `"push"` <br /> `"remove"` <br /> `"bubble"` <br /> `"repulse"` <br /> `["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 <br /> (second) | `0.4`
`interactivity.events.modes.repulse.distance` | number | `200`
`interactivity.events.modes.repulse.duration` | number <br /> (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](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](https://github.com/VincentGarreau/particles.js) Created by [Vincent Garreau](https://github.com/VincentGarreau/)

vue-particlejs

vue-particlejs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vue-particlejs

vue-particlejs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README