Easily add particle animations to your Nuxt projects using tsParticles

Nuxt Particles

npm versionnpm downloadsLicenseNuxt

Run lightweight, heavily customizable particle simulations in your Nuxt project with tsParticles.


  • 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
# Using pnpm
pnpm add -D nuxt-particles

# Using yarn
yarn add --dev nuxt-particles

# Using npm
npm install --save-dev nuxt-particles
  1. Add nuxt-particles to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [

That's it! You can now use the <NuxtParticles> component in your application! ✨

Read the documentation for more information, including configuration and optimization options.


  <!-- or -->

<script setup lang="ts">
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
  setTimeout(() => container.play(), 2000)


# 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