Nuxt3でparticleを表示する

Webサイトでparticle表現をするときによくお世話になるparticle.js。こちらをNuxt3でも使用する方法について解説します。

公式にもドキュメントがありますが、「nuxt-particles」ライブラリを使用します。

https://nuxt.com/modules/particles

まずはライブラリのインストール

yarn add --dev nuxt-particles

次にnuxt.config.tsにnuxt-particlesのmoculesを追加

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

あとはコンポーネント側で呼び出すだけです。optionsはjsonで外部ファイルとして切り離すことも可能。

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

<script setup>
const options = {
  background: {
    color: {
      value: "#ffffff",
    },
  },
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: false,
      },
      onHover: {
        enable: false,
      },
    },
  },
  particles: {
    color: {
      value: [
        "#3998D0",
        "#2EB6AF",
        "#A9BD33",
        "#FEC73B",
        "#F89930",
        "#F45623",
        "#D62E32",
        "#EB586E",
        "#9952CF"
      ],
      animation: {
        enable: true,
        speed: 300,
        sync: false
      }
    },
    move: {
      direction: "top",
      enable: true,
      outModes: {
        default: "out",
      },
      random: true,
      speed: 3,
    },
    number: {
      density: {
        enable: true,
      },
      value: 50,
    },
    opacity: {
      value: {
        min: 0.1,
        max: 1
      },
    },
    shape: {
      type: "circle",
    },
    size: {
      value: {
        min: 5,
        max: 20
      },
    },
  },
  detectRetina: true,
};
</script>

中で動いているものはtsParticleと共通なので、optionsの詳しい項目などは公式サイトを参考。

https://particles.js.org/

元々Reactで書いていたものをNuxtにReplaceしていたのですが、意外と簡単にできました。