I have a JS code and I am trying to convert it to Vue. Basically, I am trying to use this code:

And how I am trying to implement this code into mine is:

<template>
    <section id="successful-order" class="container">
        <div class="row office-banner">
            <div class="col-12">
                <img :src="successful" alt="Popper Image"/>
                <div class="sub-title">Your order is plete!</div>
                <div>You will be receiving a confirmation email with your order details.</div>
                <div class="button-area">
                    <button class="btn button">Checkout your tickets</button>
                    <button class="btn button-secondary">Go to homepage!</button>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import successful from "../../../../img/poppers.png";

export default {
    data() {
        return {
            successful: successful,
            color: ["#8b5642", "#6a696b"],
        };
    },
    methods: {
        frame() {

            
        }
    }
};
</script>

Basically, I also need to create frame() function but I am quite new in Vue so I couldn't figure it out.

I have a JS code and I am trying to convert it to Vue. Basically, I am trying to use this code: https://codepen.io/kimdontdoit/pen/wvdKLJo

And how I am trying to implement this code into mine is:

<template>
    <section id="successful-order" class="container">
        <div class="row office-banner">
            <div class="col-12">
                <img :src="successful" alt="Popper Image"/>
                <div class="sub-title">Your order is plete!</div>
                <div>You will be receiving a confirmation email with your order details.</div>
                <div class="button-area">
                    <button class="btn button">Checkout your tickets</button>
                    <button class="btn button-secondary">Go to homepage!</button>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
import successful from "../../../../img/poppers.png";

export default {
    data() {
        return {
            successful: successful,
            color: ["#8b5642", "#6a696b"],
        };
    },
    methods: {
        frame() {

            
        }
    }
};
</script>

Basically, I also need to create frame() function but I am quite new in Vue so I couldn't figure it out.

• javascript
• vue.js
• vuejs2

• Just... Copy-paste the code? – Cerbrus Commented Sep 6, 2021 at 14:36

3 Answers 3

Here's an example of a Vue app with the canvas-confetti example you listed with the codepen: https://codesandbox.io/s/canvas-confetti-vue2-psh9k?file=/src/ponents/HelloWorld.vue

You just need to instal canvas-confetti using npm. Here's the code:

<template>
  <h1 class="office-banner">IT IS YOUR BIRTHDAY.</h1>
</template>

<script>
import confetti from "canvas-confetti";

export default {
  name: "HelloWorld",
  data() {
    return {
      colors: ["#8b5642", "#6a696b"],
    };
  },
  methods: {
    frame() {
      confetti({
        particleCount: 2,
        angle: 60,
        spread: 55,
        origin: { x: 0 },
        colors: this.colors,
      });
      confetti({
        particleCount: 2,
        angle: 120,
        spread: 55,
        origin: { x: 1 },
        colors: this.colors,
      });

      if (Date.now() < Date.now() + 15000) {
        requestAnimationFrame(this.frame);
      }
    },
  },
  mounted() {
    this.frame();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this ponent only -->
<style scoped>
.office-banner {
  background-color: #e2ddd8;
  font-family: "Arial";
  padding: 0.125em;
  font-size: 4em;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-10deg);
  position: fixed;
  top: 40%;
  left: -5%;
  right: -5%;
  z-index: 100;
  margin-top: 0;
}
</style>

Here's a good article with the title "Use Any JavaScript Library With Vue.js " that you'd probably be interested in:

• https://vuejsdevelopers./2017/04/22/vue-js-libraries-plugins/

You can copy the content of frame() from Codepen and in the mounted life cycle, call this frame() method

mounted: function () {
  this.frame()
}

You would want your <script> block to look somewhat like this :

export default {
    data() {
        return {
            successful: successful,
            color: ["#8b5642", "#6a696b"],
        };
    },
    methods: {
        frame() {
            confetti({
                particleCount: 2,
                angle: 60,
                spread: 55,
                origin: { x: 0 },
                colors: this.data.color,
            });
            confetti({
                particleCount: 2,
                angle: 120,
                spread: 55,
                origin: { x: 1 },
                colors: this.data.color,
            });

            if (Date.now() < Date.now() + 15000) {
                requestAnimationFrame(frame);
            }            
        } 
    },
    mounted: function() {
        this.frame();
    }
};

The idea is you first declare the function frame(), then in the mounted hook you call that function. You can read more about the Vue instance and its lifecycle hooks here