`<NuxtParticles>`

The <NuxtParticles> component renders a tsParticles instance inside of a <div> element with the chosen id.

Example


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

  </NuxtParticles>

  <!-- or -->

  <NuxtParticles
    id="tsparticles2"
    url="/path/to/particle-options.json"
    @load="onLoad"
  >

  </NuxtParticles>
</template>

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

// See tsParticles documentation for all available options
const options = {
  fullScreen: {
    enable: true,
    zIndex: -1
  },
  background: {
    color: {
      value: '#fff'
    }
  },
  particles: {
    color: {
      value: "#000"
    },
    links: {
      color: "#000",
      enable: true
    },
    move: {
      enable: true
    },
    number: {
      value: 100
    }
  }
}

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

Props

`id`

Type: string
Required: true

Used by tsParticles to differentiate between multiple instances on the same page. Must be unique.

`options`

Type: IOptions (see tsParticles docs)
Required: false

The options object to pass to tsParticles. May be used in place of the url prop to directly pass a JSON object instead of loading a configuration file.

`url`

Type: string
Required: false

The URL of the JSON file containing the particle configuration. May be used in place of the options prop to load a configuration file instead of directly passing a JSON object.

Events

`load`

Type: (container: Container) => void (see tsParticles docs)

Called when tsParticles has successfully loaded its canvas. Provides a container object that can be used to interact with the instance. Some useful methods include:

// Pause the animation
container.pause()
// Play the animation
container.play()
// Refresh the instance
container.refresh()
// Destroy the instance
container.destroy()

This component automatically lazy-loads the tsParticles library if the particles.lazy option is set to true in your Nuxt configuration. Otherwise, the library is loaded immediately before your entire application is rendered.

Using multiple instances of this component on the same page is safe as long as each instance has a unique id. This may have performance implications, however, as each instance will be rendering its own canvas. Use one instance with multiple particle emitters whenever possible.

If you are using a custom bundle, you must manually initialize the library in your application.

Getting StartedFAQ