[Vue.js] 외부 라이브러리 사용하는 방법(+confetti effect)

📍Vue.js에서 외부 라이브러리 사용하기

- js-confetti 라이브러리를 사용하면 색종이가 흩날리는 이펙트를 만들 수 있다

- <script setup> 블럭에서 import해서 호출한다

<script setup>
import JSConfetti from 'js-confetti'

const confetti = new JSConfetti()

function showConfetti() {
  confetti.addConfetti()
}

showConfetti()
</script>

<template>
  <h1 @click="showConfetti">🎉 Congratulations!</h1>
</template>

<style>
h1 {
  text-align: center;
  cursor: pointer;
  margin-top: 3em;
}
</style>