Vue 3 एकीकरण

@tsparticles/vue3 पैकेज tsParticles के लिए एक मूल Vue 3 घटक और प्लगइन प्रणाली प्रदान करता है। यह मार्गदर्शिका मूल सेटअप से लेकर डायनामिक थीम स्विचिंग और कस्टम प्रीसेट जैसे उन्नत पैटर्न तक सब कुछ कवर करती है।

---

स्थापना

npm install @tsparticles/vue3 @tsparticles/engine

वैकल्पिक रूप से कोई प्रीसेट या पूर्ण बंडल स्थापित करें:

# पूर्ण बंडल (सभी सुविधाएँ)
npm install tsparticles

# विशिष्ट प्रीसेट
npm install @tsparticles/preset-confetti
npm install @tsparticles/preset-fireworks
npm install @tsparticles/preset-snow
npm install @tsparticles/preset-stars

# उपयोगिता कॉन्फ़िग
npm install @tsparticles/configs

---

मूल उपयोग

अपने ऐप एंट्री पॉइंट में प्लगइन पंजीकृत करें, फिर <vue-particles> घटक का कहीं भी उपयोग करें।

ऐप एंट्री (main.ts)

import { createApp } from "vue";
import App from "./App.vue";
import type { Engine } from "@tsparticles/engine";
import { ParticlesPlugin } from "@tsparticles/vue3";
import { loadFull } from "tsparticles";

const app = createApp(App);

app.use(ParticlesPlugin, {
  init: async (engine: Engine) => {
    await loadFull(engine);
  },
});

app.mount("#app");

घटक (App.vue)

<script setup lang="ts">
import type { ISourceOptions } from "@tsparticles/engine";

const options: ISourceOptions = {
  background: {
    color: "#0d47a1",
  },
  fpsLimit: 120,
  particles: {
    number: {
      value: 80,
    },
    color: {
      value: "#ffffff",
    },
    shape: {
      type: "circle",
    },
    opacity: {
      value: 0.5,
    },
    size: {
      value: { min: 1, max: 5 },
    },
    links: {
      enable: true,
      distance: 150,
      color: "#ffffff",
      opacity: 0.4,
      width: 1,
    },
    move: {
      enable: true,
      speed: 2,
      direction: "none",
      random: false,
      straight: false,
      outModes: "out",
    },
  },
  interactivity: {
    events: {
      onHover: {
        enable: true,
        mode: "repulse",
      },
    },
    modes: {
      repulse: {
        distance: 100,
      },
    },
  },
};
</script>

<template>
  <vue-particles id="tsparticles" :options="options" />
</template>

---

ईवेंट

घटक कई जीवनचक्र ईवेंट उत्सर्जित करता है:

<script setup lang="ts">
import type { Container } from "@tsparticles/engine";

const particlesLoaded = async (container: Container): Promise<void> => {
  console.log("पार्टिकल्स कंटेनर लोड हुआ", container);
};
</script>

<template>
  <vue-particles id="tsparticles" :options="options" @particles-loaded="particlesLoaded" />
</template>

---

कॉन्फ़ेटी प्रभाव

उत्सवों के लिए कॉन्फ़ेटी प्रीसेट का उपयोग करें:

npm install @tsparticles/preset-confetti

<script setup lang="ts">
import type { ISourceOptions } from "@tsparticles/engine";

const options: ISourceOptions = {
  preset: "confetti",
  background: {
    color: "transparent",
  },
};
</script>

<template>
  <vue-particles id="confetti" :options="options" />
</template>

> **नोट:** अपने ऐप एंट्री पॉइंट में प्लगइन के `init` कॉलबैक के माध्यम से `loadConfettiPreset` पंजीकृत करें ([मूल
उपयोग](#मूल-उपयोग) देखें)। एक बार के विस्फोट के लिए, प्रीसेट लोड करें फिर किसी विधि के अंदर प्रोग्रामेटिक रूप से
`tsParticles.load()` कॉल करें। --- ## आतिशबाजी प्रभाव आतिशबाजी प्रीसेट उच्च-प्रभाव वाले कण विस्फोट बनाता है: ```bash npm
install @tsparticles/preset-fireworks

<script setup lang="ts">
import type { ISourceOptions } from "@tsparticles/engine";

const options: ISourceOptions = {
  preset: "fireworks",
  background: {
    color: "#000000",
  },
};
</script>

<template>
  <vue-particles id="fireworks" :options="options" />
</template>

> **नोट:** अपने ऐप एंट्री पॉइंट में प्लगइन के `init` कॉलबैक के माध्यम से `loadFireworksPreset` पंजीकृत करें ([मूल
उपयोग](#मूल-उपयोग) देखें)। > **टिप:** आतिशबाजी प्रीसेट संसाधन-गहन है। इसे घटक से बंधे `v-if` को टॉगल करके उपयोगकर्ता
इंटरैक्शन (जैसे, बटन क्लिक) पर ट्रिगर करें। --- ## बर्फ प्रभाव बर्फ प्रीसेट के साथ गिरती बर्फ का अनुकरण करें: ```bash
npm install @tsparticles/preset-snow

<script setup lang="ts">
import type { ISourceOptions } from "@tsparticles/engine";

const options: ISourceOptions = {
  preset: "snow",
  background: {
    color: "#1a1a2e",
  },
};
</script>

<template>
  <vue-particles id="snow" :options="options" />
</template>

> **नोट:** अपने ऐप एंट्री पॉइंट में प्लगइन के `init` कॉलबैक के माध्यम से `loadSnowPreset` पंजीकृत करें ([मूल
उपयोग](#मूल-उपयोग) देखें)। --- ## इंटरैक्टिव कण होवर और क्लिक इंटरैक्टिविटी मोड जोड़ें: ```vue
<script setup lang="ts">
import type { ISourceOptions } from "@tsparticles/engine";

const options: ISourceOptions = {
  background: {
    color: "#0d0d0d",
  },
  particles: {
    number: {
      value: 100,
    },
    color: {
      value: "#00ff00",
    },
    shape: {
      type: "circle",
    },
    opacity: {
      value: 0.6,
    },
    size: {
      value: { min: 1, max: 4 },
    },
    links: {
      enable: true,
      distance: 120,
      color: "#00ff00",
      opacity: 0.3,
      width: 1,
    },
    move: {
      enable: true,
      speed: 3,
    },
  },
  interactivity: {
    events: {
      onHover: {
        enable: true,
        mode: "grab",
      },
      onClick: {
        enable: true,
        mode: "push",
      },
    },
    modes: {
      grab: {
        distance: 180,
        links: {
          opacity: 0.5,
        },
      },
      push: {
        quantity: 4,
      },
    },
  },
};
</script>

<template>
  <vue-particles id="interactive" :options="options" />
</template>

उपलब्ध इंटरैक्शन मोड: grab, repulse, bubble, connect, push, remove, trail, attract, light.

---

थीम स्विचिंग

रिएक्टिव ऑप्शन ऑब्जेक्ट को अपडेट करके रनटाइम पर कण थीम को गतिशील रूप से बदलें:

<script setup lang="ts">
import { ref } from "vue";
import type { ISourceOptions } from "@tsparticles/engine";

const isDark = ref(true);

const options = ref<ISourceOptions>({
  background: {
    color: "#000000",
  },
  particles: {
    color: {
      value: "#ffffff",
    },
    links: {
      color: "#ffffff",
    },
    number: {
      value: 60,
    },
    move: {
      enable: true,
      speed: 2,
    },
    size: {
      value: { min: 1, max: 3 },
    },
  },
});

const toggleTheme = () => {
  isDark.value = !isDark.value;
  options.value = {
    ...options.value,
    background: {
      color: isDark.value ? "#000000" : "#f0f0f0",
    },
    particles: {
      ...options.value.particles,
      color: {
        value: isDark.value ? "#ffffff" : "#333333",
      },
      links: {
        ...(options.value.particles?.links as object),
        color: isDark.value ? "#ffffff" : "#333333",
      },
    },
  };
};
</script>

<template>
  <div>
    <button @click="toggleTheme">{{ isDark ? "लाइट" : "डार्क" }} पर स्विच करें</button>
    <vue-particles id="theme-particles" :options="options" />
  </div>
</template>

<vue-particles> घटक शून्य-कॉन्फ़िग स्विचिंग के लिए एक theme प्रॉप का भी समर्थन करता है। जब theme प्रॉप बदलता है, तो घटक कंटेनर को नष्ट और पुनर्निर्मित किए बिना नई थीम लागू करता है:

<template>
  <vue-particles id="tsparticles" :options="options" :theme="currentTheme" />
</template>

नोट: theme प्रॉप के लिए वैकल्पिक @tsparticles/plugin-themes पैकेज आवश्यक है। इसके बिना, theme प्रॉप एक सुरक्षित नो-ऑप है — कोई त्रुटि नहीं फेंकी जाती, लेकिन थीम परिवर्तन अनदेखा कर दिया जाता है।

---

@tsparticles/configs से कस्टम प्रीसेट

@tsparticles/configs पैकेज पूर्व-निर्मित कॉन्फ़िगरेशन ऑब्जेक्ट निर्यात करता है:

npm install @tsparticles/configs

<script setup lang="ts">
import type { ISourceOptions } from "@tsparticles/engine";
import particlesConfig from "@tsparticles/configs/particles.json";

const options: ISourceOptions = {
  ...particlesConfig,
  background: {
    color: "#1e1e2e",
  },
};
</script>

<template>
  <vue-particles id="config-particles" :options="options" />
</template>

> **नोट:** अपने ऐप एंट्री पॉइंट में प्लगइन के `init` कॉलबैक के माध्यम से `loadLinksPreset` पंजीकृत करें ([मूल
उपयोग](#मूल-उपयोग) देखें)। तैयार-से-उपयोग लेआउट के लिए `@tsparticles/configs` पैकेज में उपलब्ध कॉन्फ़िग देखें। --- ##
इंजन आरंभीकरण दृष्टिकोण इंजन को आरंभ करने के दो तरीके हैं: ### 1. वैश्विक प्लगइन (अनुशंसित) ```typescript // main.ts
import { createApp } from "vue"; import App from "./App.vue"; import type { Engine } from "@tsparticles/engine"; import
{ ParticlesPlugin } from "@tsparticles/vue3"; import { loadFull } from "tsparticles"; createApp(App)
.use(ParticlesPlugin, { init: async (engine: Engine) => { await loadFull(engine); }, }) .mount("#app");

इंजन फिर वैश्विक रूप से उपलब्ध है और सभी <vue-particles> इंस्टेंस इसे साझा करते हैं।

2. पार्टिकल्स प्रोवाइडर (कम्पोज़िशन API)

इंजन तक प्रोग्रामेटिक रूप से पहुँचने के लिए प्रोवाइडर का उपयोग करें:

<script setup lang="ts">
import { useParticlesProvider } from "@tsparticles/vue3";
import { loadFull } from "tsparticles";

const { init } = useParticlesProvider();

await init(async (engine: Engine) => {
  await loadFull(engine);
});
</script>

---

नामित निर्यात + TypeScript

सभी भागों के साथ पूर्ण TypeScript उदाहरण:

<script setup lang="ts">
import { ref } from "vue";
import type { Container, ISourceOptions } from "@tsparticles/engine";

const particlesContainer = ref<Container | null>(null);

const options: ISourceOptions = {
  background: {
    color: "#0d47a1",
  },
  fpsLimit: 60,
  particles: {
    number: {
      value: 50,
    },
    color: {
      value: "#ffd700",
    },
    shape: {
      type: ["circle", "triangle", "polygon"],
    },
    opacity: {
      value: 0.7,
      random: true,
    },
    size: {
      value: { min: 2, max: 8 },
      random: true,
    },
    links: {
      enable: true,
      distance: 200,
      color: "#ffd700",
      opacity: 0.3,
      width: 1,
    },
    move: {
      enable: true,
      speed: 2,
      direction: "none",
      random: true,
      straight: false,
      outModes: "bounce",
      attract: {
        enable: false,
      },
    },
  },
  interactivity: {
    events: {
      onHover: {
        enable: true,
        mode: "bubble",
      },
      onClick: {
        enable: true,
        mode: "repulse",
      },
    },
    modes: {
      bubble: {
        distance: 200,
        size: 12,
        duration: 0.3,
      },
      repulse: {
        distance: 200,
      },
    },
  },
  detectRetina: true,
};

const particlesLoaded = async (container: Container): Promise<void> => {
  particlesContainer.value = container;
  console.log("कंटेनर तैयार", container);
};
</script>

<template>
  <vue-particles id="tsparticles" :options="options" @particles-loaded="particlesLoaded" />
</template>

---

API संदर्भ

प्रॉप	प्रकार	डिफ़ॉल्ट	विवरण
id	string	"tsparticles"	कैनवास तत्व आईडी
options	ISourceOptions	{}	कण कॉन्फ़िगरेशन
url	string	—	JSON कॉन्फ़िग लोड करने का URL
theme	string	—	थीम नाम (@tsparticles/plugin-themes आवश्यक; अनुपलब्ध होने पर सुरक्षित नो-ऑप)

ईवेंट	पेलोड	विवरण
@particles-loaded	Container	जब कंटेनर पूरी तरह से आरंभीकृत हो जाता है तब फायर होता है

---

समस्या निवारण

• त्रुटि: tsparticles is not defined — सुनिश्चित करें कि घटक रेंडर होने से पहले init कॉलबैक के अंदर tsparticles (या आपके आवश्यक प्रीसेट) लोड किए गए हैं।
• कैनवस दिखाई नहीं दे रहा — सत्यापित करें कि पैरेंट कंटेनर में गैर-शून्य ऊँचाई है। #tsparticles { height: 100vh; } जैसा CSS नियम जोड़ें।
• प्रदर्शन संबंधी समस्याएँ — कम-अंत वाले उपकरणों पर fpsLimit कम करें, particles.number.value घटाएँ, या detectRetina अक्षम करें।
• SSR (Nuxt) — <vue-particles> घटक केवल-क्लाइंट है। इसे <ClientOnly> में लपेटें या client:only डायरेक्टिव का उपयोग करें।