DEV Community

Matteo Bruni for tsParticles

Posted on • Updated on

particles.vue 1.2.7 released

particles.vue

Vue.js component for tsParticles

Installation

yarn add particles.vue
Enter fullscreen mode Exit fullscreen mode

Usage

import Particles from 'particles.vue';

export default {
    name: 'App',
    components: {
        Particles
    }
}
Enter fullscreen mode Exit fullscreen mode

Simple config

<template>
    <div id="app">
      <Particles id="tsparticles" lineLinked="true"/>
    </div>
 </template>
Enter fullscreen mode Exit fullscreen mode

Full Config

<template>
    <div id="app">
      <particles
        id="tsparticles"
        color="#dedede"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="4"
        linesColor="#dedede"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </particles>
    </div>
 </template>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)