nuxt-particles
v0.3.0
Published
Run lightweight, heavily customizable particle simulations in your Nuxt project with tsParticles.
Downloads
2,042
Maintainers
Readme
Nuxt Particles
Run lightweight, heavily customizable particle simulations in your Nuxt project with tsParticles.
Features
- Built for Nuxt 3
- Lazy loading by default
- Built-in full, slim, and basic bundles, or
- Use a custom bundle for extra performance
- All with just one component!
Quick Setup
- Add the
nuxt-particles
dependency to your project
# Using pnpm
pnpm add -D nuxt-particles
# Using yarn
yarn add --dev nuxt-particles
# Using npm
npm install --save-dev nuxt-particles
- Add
nuxt-particles
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-particles'
]
})
That's it! You can now use the <NuxtParticles> component in your application! ✨
Read the documentation for more information, including configuration and optimization options. Documentation on how to configure the particles themselves is available on tsparticles's website.
Example:
<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>
Development
# 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