Particles.vue3 released! Particles animations for Vue.js 3.x
Tags: vue, showdev, news, javascript
Published: 2020-09-21 23:29:00

[![banner](https://cdn.matteobruni.it/images/particles/banner2.png)](https://particles.matteobruni.it)

# particles.vue3

Particles.vue3 is the new [tsParticles](https://github.com/matteobruni/tsparticles) component for Vue.js 3.x since 2.x components are not compatible.

You can now have cool particle animations easily also in Vue.js 3.x!!

[![npm](https://img.shields.io/npm/v/particles.vue3)](https://www.npmjs.com/package/particles.vue3) [![npm](https://img.shields.io/npm/dm/particles.vue3)](https://www.npmjs.com/package/particles.vue3)

Official [tsParticles](https://github.com/matteobruni/tsparticles) VueJS 3.x component

## Installation

```shell script
yarn add particles.vue3
```

## Usage

```javascript
import Particles from "particles.vue3";

createApp(App).use(Particles)
```

### Demo config

```html
<template>
  <div id="app">
    <Particles
      id="tsparticles"
      :options="{
            background: {
                color: {
                    value: '#0d47a1'
                }
            },
            fpsLimit: 60,
            interactivity: {
                detectsOn: 'canvas',
                events: {
                    onClick: {
                        enable: true,
                        mode: 'push'
                    },
                    onHover: {
                        enable: true,
                        mode: 'repulse'
                    },
                    resize: true
                },
                modes: {
                    bubble: {
                        distance: 400,
                        duration: 2,
                        opacity: 0.8,
                        size: 40,
                        speed: 3
                    },
                    push: {
                        quantity: 4
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4
                    }
                }
            },
            particles: {
                color: {
                    value: '#ffffff'
                },
                links: {
                    color: '#ffffff',
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 1
                },
                collisions: {
                    enable: true
                },
                move: {
                    direction: 'none',
                    enable: true,
                    outMode: 'bounce',
                    random: false,
                    speed: 6,
                    straight: false
                },
                number: {
                    density: {
                        enable: true,
                        value_area: 800
                    },
                    value: 80
                },
                opacity: {
                    value: 0.5
                },
                shape: {
                    type: 'circle'
                },
                size: {
                    random: true,
                    value: 5
                }
            },
            detectRetina: true
        }"
    />
  </div>
</template>
```

### TypeScript errors

If TypeScript returns error while importing/using Particles plugin try adding the following import before the previous code:

```typescript
declare module "particles.vue3";
```

## Demos

The demo website is [here](https://particles.matteobruni.it)

<https://particles.matteobruni.it>

There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)

<https://codepen.io/collection/DPOage>

{% codesandbox particlesvue3-68246 %}

{% github matteobruni/tsparticles %}