repository·main·Indexed 41 days ago
https://github.com/tsparticles/vue3Official VueJS 3.x component for tsParticles, a particle engine for creating interactive background effects. Provides the <vue-particles /> component for rendering animations via options objects or remote JSON URLs, and includes integration for Nuxt 3.
To prepare the application for production, build the project and then use the preview command to test the production build locally.
# Build the application
npm run build
# Locally preview the production build
npm run previewBy default, TypeScript cannot handle type information for .vue imports. While vue-tsc is used for CLI type checking, you can improve editor performance by enabling Take Over Mode in Volar. This makes the TypeScript language service aware of .vue types more efficiently.
To enable Take Over Mode:
Extensions: Show Built-in Extensions.TypeScript and JavaScript Language Features, right-click it, and select Disable (Workspace).Developer: Reload Window to apply changes.When migrating from @tsparticles/vue2 to @tsparticles/vue3, follow these steps:
@tsparticles/vue2 with @tsparticles/vue3.node_modules by running npm install or yarn.Vue.use(Particles, { init: ... }) to createApp(App).use(Particles, { init: ... }).Note: The <vue-particles /> component tag syntax remains unchanged.
For the best development experience with Vue 3 and TypeScript, use VSCode with the following extensions installed:
Important: Ensure that the Vetur extension is disabled to avoid conflicts.
To use the official tsParticles VueJS 3.x component, install the package using yarn:
yarn add @tsparticles/vue3Use the following commands to manage your project lifecycle using npm:
# Install dependencies
npm install
# Start development server with hot-reload
npm run dev
# Run type-checking, compilation, and minification for production
npm run build
# Run ESLint
npm run lintTo set up the Nuxt 3 Minimal Starter project, install the dependencies using your preferred package manager. If using pnpm, ensure you use the --shamefully-hoist flag to ensure compatibility with the project's dependency structure.
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoistStart the local development server to view the application at http://localhost:3000.
npm run devTo set up the plugin, import the Particles component and an engine loader (like loadSlim from @tsparticles/slim or loadFull from tsparticles). Register the plugin using the app.use() method in your main entry file, providing an init function to load the required engine features.
import Particles from "@tsparticles/vue3";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "@tsparticles/slim"; // if you are going to use `loadSlim`, install the "@tsparticles/slim" package too.
createApp(App).use(Particles, {
init: async engine => {
// await loadFull(engine); // you can load the full tsParticles library from "tsparticles" if you need it
await loadSlim(engine); // or you can load the slim version from "@tsparticles/slim" if don't need Shapes or Animations
},
});To use the vue-particles component in your Vue 3 application, use the default export function (often referred to as VueParticles). This function registers the global component and initializes the tsParticles engine.
It requires an options object containing an init function. This init function is used to load plugins or specific configurations into the tsParticles engine before the particles start rendering.
Once initialized, a CustomEvent named particlesInit is dispatched on the window object, carrying the initialized tsParticles instance in its detail property. This is useful if you need to access the engine instance outside of the Vue component lifecycle.
import { createApp } from 'vue';
import VueParticles from '@tsparticles/vue3';
import { tsParticles } from '@tsparticles/engine';
// Import any plugins you need here
// import { loadFull } from 'tsparticles';
const app = createApp(App);
app.use(VueParticles, {
init: async (engine) => {
// Load plugins or configurations here
// await loadFull(engine);
}
});
app.mount('#app');If TypeScript returns errors when importing or using the Particles plugin, add the following module declaration before your existing code to resolve the type issues:
declare module "@tsparticles/vue3";The <vue-particles /> component can be used in two ways:
url prop to load a configuration from a remote JSON file.:options prop containing the particle configuration object.You can also listen to the @particles-loaded event, which provides the particles container instance once it is ready.
<template>
<div id="app">
<!-- Loading via URL -->
<vue-particles id="tsparticles" @particles-loaded="particlesLoaded" url="http://foo.bar/particles.json" />
<!-- Loading via Options object -->
<vue-particles
id="tsparticles"
@particles-loaded="particlesLoaded"
:options="{
background: { color: { value: '#0d47a1' } },
fpsLimit: 120,
interactivity: {
events: {
onClick: { enable: true, mode: 'push' },
onHover: { enable: true, mode: 'repulse' }
},
modes: {
bubble: { distance: 400, duration: 2, opacity: 0.8, size: 40 },
push: { quantity: 4 },
repulse: { distance: 200, duration: 0.4 }
}
},
particles: {
color: { value: '#ffffff' },
links: { color: '#ffffff', distance: 150, enable: true, opacity: 0.5, width: 1 },
move: { direction: 'none', enable: true, outModes: 'bounce', random: false, speed: 6, straight: false },
number: { density: { enable: true }, value: 80 },
opacity: { value: 0.5 },
shape: { type: 'circle' },
size: { value: { min: 1, max: 5 } }
},
detectRetina: true
}"
/>
</div>
</template>
<script setup>
const particlesLoaded = async container => {
console.log("Particles container loaded", container);
};
</script>