Typescript support

[weihao]

  Try `npm install @types/vue-confetti` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-confetti';`
    1 | import Vue from 'vue'
  > 2 | import VueConfetti from 'vue-confetti'
      |                         ^
    3 | 
    4 | Vue.use(VueConfetti)
    5 | 

ℹ Version: typescript 3.8.3  

[weihao]

Also,

 this.$confetti.start()
         ^ undefined in typescript

[weihao]

@alexandermendes

Hi Alex, any plans on supporting types?

[alexandermendes]

Hi, didn't have any immediate plans to, might do it sometime though!

[ghost]

@alexandermendes I would love this as well!

[mikesimps]

I got this working with Nuxtjs and Typescript

plugins/vue-confetti.client.ts

import Vue from 'vue'
import { Plugin } from '@nuxt/types'
import VueConfetti from 'vue-confetti'

declare module 'vue/types/vue' {
    interface Vue {
        $confetti: VueConfetti
    }
}

const VueConfettiPlugin: Plugin = () => {
    Vue.use(VueConfetti as any)
}

export default VueConfettiPlugin

types/vue-confetti.d.ts

declare module 'vue-confetti' {
    interface ParticleOptions {
        type?: string
        size?: number
        dropRate?: number
        colors?: Array<string>
    }

    interface ConfettiOptions {
        particles?: Array<ParticleOptions>
        defaultType?: string
        defaultSize?: number
        defaultDropRate?: number
        defaultColors?: Array<string>
        canvasId?: string
        particlesPerFrame?: number
    }

    export default class VueConfetti {
        install(Vue: Vue, options: ConfettiOptions): void
        start(opts?: ConfettiOptions): void
        stop(): void
    }
}

nuxt.config.js

plugins: [
        { src: '~/plugins/vue-confetti.client.ts' }
]

Now I can use $confetti in any part of my Vue components

mounted() {
    this.$confetti.start()
}

[Vidhya-Dilip]

@mikesimps your solution worked. 💥 But only on pages, not components. So I emitted on click, from component to page and called this.$confetti.start().

[jacobmstein]

I got this working with Nuxtjs and Typescript

plugins/vue-confetti.client.ts

import Vue from 'vue'
import { Plugin } from '@nuxt/types'
import VueConfetti from 'vue-confetti'

declare module 'vue/types/vue' {
    interface Vue {
        $confetti: VueConfetti
    }
}

const VueConfettiPlugin: Plugin = () => {
    Vue.use(VueConfetti as any)
}

export default VueConfettiPlugin

types/vue-confetti.d.ts

declare module 'vue-confetti' {
    interface ParticleOptions {
        type?: string
        size?: number
        dropRate?: number
        colors?: Array<string>
    }

    interface ConfettiOptions {
        particles?: Array<ParticleOptions>
        defaultType?: string
        defaultSize?: number
        defaultDropRate?: number
        defaultColors?: Array<string>
        canvasId?: string
        particlesPerFrame?: number
    }

    export default class VueConfetti {
        install(Vue: Vue, options: ConfettiOptions): void
        start(opts?: ConfettiOptions): void
        stop(): void
    }
}

nuxt.config.js

plugins: [
        { src: '~/plugins/vue-confetti.client.ts' }
]

Now I can use $confetti in any part of my Vue components

mounted() {
    this.$confetti.start()
}

Thank you! It would be great if you contributed these to DefinitelyTyped, very easy!