Nuxt Particles

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

• 📖  Documentation
• ✨  Release Notes
• 🏀 Online playground

Features

• Built for Nuxt 4 (Nuxt 3 support on https://github.com/Joepocalyptic/nuxt-particles)
• 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 @magictm/nuxt-particles dependency to your project

# Using pnpm
pnpm add -D @magictm/nuxt-particles

# Using yarn
yarn add --dev @magictm/nuxt-particles

# Using npm
npm install --save-dev @magictm/nuxt-particles

2. Add @magictm/nuxt-particles to the modules section of nuxt.config.ts

export default defineNuxtConfig({
    modules: ['@magictm/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