@tsparticles/vue3
Version:
Official tsParticles Vue.js 3.x Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js 2.x,
2 lines (1 loc) • 1.06 kB
JavaScript
(function(e,t){typeof exports=="object"&&typeof module<"u"?module.exports=t(require("vue"),require("@tsparticles/engine")):typeof define=="function"&&define.amd?define(["vue","@tsparticles/engine"],t):(e=typeof globalThis<"u"?globalThis:e||self,e["@tsparticles/vue3"]=t(e.Vue,e.tsParticles))})(this,function(e,t){"use strict";const a=["id"],l=e.defineComponent({__name:"vue-particles",props:{id:{},options:{},url:{}},emits:["particlesLoaded"],setup(o,{emit:n}){let i,s;const r=o,p=n;addEventListener("particlesInit",c=>{s=c.detail,d()});const d=async()=>{s||(s=t.tsParticles),i=await s.load({id:r.id,url:r.url,options:r.options}),p("particlesLoaded",i)};return e.onMounted(()=>{e.nextTick(()=>{if(!r.id)throw new Error("Prop 'id' is required!");d()})}),e.onUnmounted(()=>{i&&(i.destroy(),i=void 0)}),(c,u)=>(e.openBlock(),e.createElementBlock("div",{id:c.id},null,8,a))}});return(o,n)=>{o.component("vue-particles",l),(async()=>(t.tsParticles.init(),n.init&&await n.init(t.tsParticles),dispatchEvent(new CustomEvent("particlesInit",{detail:t.tsParticles}))))()}});