Nuxt Particles

tsParticles を使用して、軽量でカスタマイズ性の高いパーティクルシミュレーションを Nuxt プロジェクトで実行します。

機能

Nuxt 3 用に構築
デフォルトで遅延読み込み
組み込みのフル、スリム、ベーシックのバンドル、または
パフォーマンスの向上にカスタムバンドルを使用
すべて1 つのコンポーネントのみ！

クイックセットアップ

nuxt-particles 依存関係をプロジェクトに追加します。

# Using pnpm
pnpm add -D nuxt-particles

# Using yarn
yarn add --dev nuxt-particles

# Using npm
npm install --save-dev nuxt-particles

nuxt-particles を nuxt.config.ts の modules セクションに追加します。

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

以上です！これで、アプリケーションで <NuxtParticles> コンポーネントを使用できます。✨

ドキュメントで、詳細情報、構成オプション、および最適化オプションを確認できます。パーティクル自体の構成方法に関するドキュメントは、tsparticles の Web サイトでご覧いただけます。

例

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

開発

# 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

nuxt-particles

Nuxt Particles

機能

クイック セットアップ

開発

クイックセットアップ