DEV Community

Matteo Bruni for tsParticles

Posted on Edited 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)