https://github.com/joepocalyptic/nuxt-particles
Run lightweight, heavily customizable particle simulations in your Nuxt project with tsParticles.
https://github.com/joepocalyptic/nuxt-particles
animations nuxt nuxt-module nuxt3 particles particles-animations tsparticles
Last synced: about 1 month ago
JSON representation
Run lightweight, heavily customizable particle simulations in your Nuxt project with tsParticles.
- Host: GitHub
- URL: https://github.com/joepocalyptic/nuxt-particles
- Owner: Joepocalyptic
- License: mit
- Created: 2023-08-21T02:37:16.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-08T19:28:55.000Z (about 1 month ago)
- Last Synced: 2025-04-09T20:14:26.365Z (about 1 month ago)
- Topics: animations, nuxt, nuxt-module, nuxt3, particles, particles-animations, tsparticles
- Language: TypeScript
- Homepage: https://nuxt-particles.joeypereira.dev
- Size: 654 KB
- Stars: 34
- Watchers: 2
- Forks: 4
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt Particles
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Run lightweight, heavily customizable particle simulations in your Nuxt project with tsParticles.
- [📖 Documentation](https://nuxt-particles.joeypereira.dev)
- [✨ Release Notes](/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/Joepocalyptic/nuxt-particles?file=playground%2Fapp.vue)
## Features
- Built for **Nuxt 3**
- **Lazy loading** by default
- Built-in full, slim, and basic bundles, or
- Use a custom bundle for extra performance
- All with just **one component**!
## Quick Setup
1. Add the `nuxt-particles` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-particles
# Using yarn
yarn add --dev nuxt-particles
# Using npm
npm install --save-dev nuxt-particles
```
2. Add `nuxt-particles` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-particles'
]
})
```
That's it! You can now use the <NuxtParticles> component in your application! ✨
Read the [documentation](https://nuxt-particles.joeypereira.dev) for more information, including
configuration and optimization options. Documentation on how to configure the particles themselves
is available on [tsparticles's website](https://particles.js.org/).
Example:
```vue
import type { Container } from '@tsparticles/engine'
const options = {
// See https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html
}
const onLoad = (container: Container) => {
// Do something with the container
container.pause()
setTimeout(() => container.play(), 2000)
}
```
## Development
```bash
# Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Release new version
pnpm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-particles/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-particles
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-particles.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-particles
[license-src]: https://img.shields.io/npm/l/nuxt-particles.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-particles
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com