Nuxt 粒子效果

使用 tsParticles 在您的 Nuxt 项目中运行轻量级、高度可定制的粒子模拟。

功能特性

为 Nuxt 3 构建
默认懒加载
内置完整、精简和基本捆绑包，或
使用自定义捆绑包以获得额外的性能
只需一个组件即可完成所有操作！

快速设置

将 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 的网站。

示例

<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