How to Add Particle Backgrounds in Nuxt with tsparticles

Want to add eye-catching animated particle backgrounds to your Nuxt.js site? Here's how to integrate tsparticles using the nuxt-particles module.

Step 1: Installation

npm install --save-dev nuxt-particles

yarn add -D nuxt-particles

Step 2: Configuration

Add to nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    'nuxt-particles',
  ],
})

Step 3: Basic Implementation

<template>
  <NuxtParticles id="tsparticles" :options="options" @load="onLoad" />
</template>

<script setup lang="ts">
import type { Container } from 'tsparticles-engine'

const options = {
  // see full example below
}

const onLoad = (container: Container) => {
  container.pause()
  setTimeout(() => container.play(), 2000)
}
</script>

Full Configuration Example

<script setup lang="ts">
import type { Container } from 'tsparticles-engine'

const options = {
  fullScreen: { enable: true, zIndex: -1 },
  interactivity: {
    events: {
      onclick: { enable: true, mode: 'push' },
      onhover: { enable: true, mode: 'repulse' },
    },
    modes: {
      push: { quantity: 10 },
      repulse: { distance: 100 },
    },
  },
  particles: {
    color: { value: '#0ea5e9' },
    links: { color: '#0ea5e9', enable: true, distance: '200' },
    move: { enable: true },
    number: { value: 200 },
  },
}

const onLoad = (container: Container) => {
  container.pause()
  setTimeout(() => container.play(), 2000)
}
</script>

Customization

Adjust color, number, move, links, and interactivity to match your site's aesthetic. Full documentation: nuxt-particles docs.