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!
- Add the
nuxt-particlesdependency 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- 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. 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># 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