https://github.com/tsparticles/vue3

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

hacktoberfest javascript tsparticles typescript vue vue3 vuejs vuejs3

Last synced: 18 days ago
JSON representation

Vue.js tsParticles official component

• Host: GitHub
• URL: https://github.com/tsparticles/vue3
• Owner: tsparticles
• License: mit
• Created: 2022-11-11T00:29:42.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-10-09T11:19:14.000Z (about 1 month ago)
• Last Synced: 2024-10-14T14:42:08.580Z (about 1 month ago)
• Topics: hacktoberfest, javascript, tsparticles, typescript, vue, vue3, vuejs, vuejs3
• Language: Vue
• Homepage:
• Size: 1.09 MB
• Stars: 118
• Watchers: 3
• Forks: 7
• Open Issues: 10
• 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/vue3

[![npm](https://img.shields.io/npm/v/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3) [![npm](https://img.shields.io/npm/dm/@tsparticles/vue3)](https://www.npmjs.com/package/@tsparticles/vue3) [![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

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

```

## Usage

```javascript

import Particles from "@tsparticles/vue3";

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

createApp(App).use(Particles, {

  init: async engine => {

    // await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it

    await loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations

  },

});

```

### 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/vue3";

```

## 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 `@tsparticles/vue2` to `@tsparticles/vue3`

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

-   Change the `use` function from `Vue.use(Particles, { init: /* omissis */ })`

    to `createApp(App).use(Particles, { init: /* omissis */ })`.

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