Nuxt Particles

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

Add the nuxt-particles dependency to your project

# Using pnpmpnpm add -D nuxt-particles# Using yarnyarn add --dev nuxt-particles# Using npmnpm install --save-dev nuxt-particles

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.

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 dependenciespnpm install# Generate type stubspnpm run dev:prepare# Develop with the playgroundpnpm run dev# Build the playgroundpnpm run dev:build# Run ESLintpnpm run lint# Release new versionpnpm run release