Run lightweight, heavily customizable particle simulations in your Nuxt project with tsParticles.
npm install 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
- ✨ Release Notes
- 🏀 Online playground
- 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!
1. Add the nuxt-particles dependency to your project
``bashUsing pnpm
pnpm add -D 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 for more information, including
configuration and optimization options. Documentation on how to configure the particles themselves
is available on tsparticles's website.
Example:
`vue
id="tsparticles"
url="/path/to/particles.json"
@load="onLoad"
>
id="tsparticles"
:options="options"
@load="onLoad"
>
`Development
`bash
Install dependencies
pnpm installGenerate type stubs
pnpm run dev:prepareDevelop with the playground
pnpm run devBuild the playground
pnpm run dev:buildRun ESLint
pnpm run lintRelease 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