https://github.com/tsparticles/vue

tsParticles official Vue.js component library
https://github.com/tsparticles/vue

hacktoberfest javascript nuxt nuxt2 nuxt3 tsparticles typescript vue vuejs vuejs2 vuejs3

Last synced: 11 days ago
JSON representation

tsParticles official Vue.js component library

• Host: GitHub
• URL: https://github.com/tsparticles/vue
• Owner: tsparticles
• License: mit
• Created: 2023-08-26T17:50:06.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-09T13:09:19.000Z (11 days ago)
• Last Synced: 2025-02-09T14:22:42.307Z (11 days ago)
• Topics: hacktoberfest, javascript, nuxt, nuxt2, nuxt3, tsparticles, typescript, vue, vuejs, vuejs2, vuejs3
• Language: Vue
• Homepage:
• Size: 369 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 12
• 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/vue

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

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

[![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/vue

```

## Usage

```javascript

import Particles from "@tsparticles/vue";

createApp(App).use(Particles);

```

### Demo config

```html

    


        


        

    


```

```javascript

//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.

const particlesInit = async engine => {

    //await loadFull(engine);

    await loadSlim(engine);

};

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/vue";

```

## 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)

## Migrating from Vue 2.x to Vue 3.x

If you are migrating your project from Vue 2.x to 3.x you need to these steps:

-   Change the dependency from `vue2-particles` to `@tsparticles/vue`

-   Update the `node_modules` folder executing `npm install` or `yarn`

-   Change the `use` function from `Vue.use(Particles)` to `createApp(App).use(Particles)`.

The `` tag syntax remains the same, so you don't need to do any additional action.