particles
Easily add particle animations to your Nuxt projects using tsParticles
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-particlesdependency to your project
# Using pnpmpnpm add -D nuxt-particles# Using yarnyarn add --dev nuxt-particles# Using npmnpm install --save-dev nuxt-particles- Add
nuxt-particlesto themodulessection ofnuxt.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 releaseContributors 1