https://github.com/tsparticles/vue2

tsParticles Official Vue 2 component library
https://github.com/tsparticles/vue2

hacktoberfest javascript tsparticles typescript vue vue2 vuejs vuejs2

Last synced: 3 months ago
JSON representation

tsParticles Official Vue 2 component library

• Host: GitHub
• URL: https://github.com/tsparticles/vue2
• Owner: tsparticles
• License: mit
• Created: 2022-12-29T16:59:25.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-04-08T10:43:15.000Z (3 months ago)
• Last Synced: 2025-04-08T11:34:01.369Z (3 months ago)
• Topics: hacktoberfest, javascript, tsparticles, typescript, vue, vue2, vuejs, vuejs2
• Language: Vue
• Homepage:
• Size: 1.7 MB
• Stars: 16
• Watchers: 3
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)

# @tsparticles/vue2

[![npm](https://img.shields.io/npm/v/@tsparticles/vue2)](https://www.npmjs.com/package/@tsparticles/vue2) [![npm](https://img.shields.io/npm/dm/vue2-particles)](https://www.npmjs.com/package/vue2-particles) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)

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

[![Slack](https://particles.js.org/images/slack.png)](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [![Discord](https://particles.js.org/images/discord.png)](https://discord.gg/hACwv45Hme) [![Telegram](https://particles.js.org/images/telegram.png)](https://t.me/tsparticles)

[![tsParticles Product Hunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=186113&theme=light)](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 

## Installation

```shell script

yarn add @tsparticles/vue2

```

## Usage

```javascript

import Particles from "@tsparticles/vue2";

//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.

import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.

Vue.use(Particles, {

    init: async engine => {

        // await loadFull(engine);

        await loadSlim(engine);

    },

});

```

### Demo config

```html

    


        


        

        

    


```

```javascript

const particlesLoaded = async container => {

    console.log("Particles container loaded", container);

};

```

### TypeScript errors

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

code:

```typescript

declare module "@tsparticles/vue2";

```

## Demos

The demo website is [here](https://particles.js.org)

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