Nuxt 2 is reaching End-of-Life on June 30th, 2024.

particles

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.

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
# 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: [
    '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:

<template>
  <NuxtParticles
    id="tsparticles"
    url="/path/to/particles.json"
    @load="onLoad"
  ></NuxtParticles>
  
  <!-- or -->
  
  <NuxtParticles
    id="tsparticles"
    :options="options"
    @load="onLoad"
  ></NuxtParticles>
</template>

<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
  container.pause()
  setTimeout(() => container.play(), 2000)
}
</script>

Development

# 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