Integrating Particles.js with Nuxt 3

Question

Hello fellow developers,

I'm currently working on a project using Nuxt 3 and I'm attempting to integrate Particles.js for some interactive particle animations on specific pages. However, despite thorough searching, I haven't been able to find any official documentation or guides on how to achieve this within the context of Nuxt 3.

I am not very clear how to use the Nuxt 3 plugins to be able to use them in the application

Right now im trying this methodology:

yarn add particles.js

In /plugins/particles.js

Import Vue from 'vue';
import Particles from 'particles.js';
Vue.use(Particles);

Configuring nuxt.config.ts

plugins: [
{ src: '~/plugins/particles.js', ssr: false }
]

Then implementing the particle div into my component, but im getting this error:

ERROR [warn] [nuxt] Plugin /Users/nicoalvarez/Desktop/Repositories/back-office/plugins/particles.js has no default export and will be ignored at build time. Add export default defineNuxtPlugin(() => {}) to your plugin.

Answer 1

Nuxt 3 came out with huge differences from Nuxt version 2. these codes you provided are from the previous version. applying particles is now easier than ever. (thanks to Joepocalyptic) here are the steps:

1. Install nuxt-particles:

yarn add -D nuxt-particles

or whatever your favorite package manager is

2. Add nuxt-particles to the modules section of nuxt.config.ts:

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

with these two simple step you are all set and ready to use particles now you have access to <NuxtParticles></NuxtParticles> tags

USAGE:

there are two ways to use particles using this module:

(A) using external JSON particles configuration:

you have to make a JSON file with your particles configuration in it and I recommend using public directory for placing your json file

<template>
  <NuxtParticles
    id="tsparticles"
    url="/path/to/particles.json"
    @load="onLoad"
  ></NuxtParticles>

(B) using internal particles configuration:

<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>

here is an example:

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

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

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>

here is the link to the documentation of nuxt-particles:

• https://github.com/Joepocalyptic/nuxt-particles
• https://nuxt-particles.joeypereira.dev/getting-started/setup