party.js with vue sfc component

party.vue

<template>
  <div class="container">
    <button
      ref="buttonRef"
      href="#"
      class="button--green"
      @click.prevent="handleClick"
    >
      party
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from '@nuxtjs/composition-api'
import * as party from 'party-js'

export default defineComponent({
  setup() {
    const buttonRef = ref<HTMLButtonElement>()
    const handleClick = () => {
      party.confetti(buttonRef.value!)
    }
    return {
      handleClick,
      buttonRef,
    }
  },
})
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>