how to add and use vue-confetti in gridsome

Question

I am using vue-confetti package in my application but it's giving the below error while building, I wanted to know how to overcome this error with how to make it to only render at the client-side using Gridsome.

ReferenceError: window is not defined
    at Object.<anonymous> (node_modules/vue-confetti/dist/vue-confetti.js:1:210)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.<anonymous> (assets/js/app.1b103b72.js:43910:20)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.module.exports.module.exports (assets/js/app.1b103b72.js:5973:18)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at assets/js/app.1b103b72.js:118:18
    at Object.<anonymous> (assets/js/app.1b103b72.js:121:10)
    at o (D:\angular\climber-website\node_modules\vue-server-renderer\build.prod.js:1:77543)
    at D:\angular\climber-website\node_modules\vue-server-renderer\build.prod.js:1:78136```


  [1]: https://www.npmjs.com/package/vue-confetti

Answer 1

I found a solution to your problem and the following links were helping me:

• https://github.com/gridsome/gridsome/issues/180
• https://gridsome.org/docs/assets-scripts/
• https://gridsome.org/docs/client-api/

The following works for me:

main.js (created by default in gridsome starter project)

// This is the main.js file. Import global CSS and scripts here.
// The Client API can be used here. Learn more: gridsome.org/docs/client-api

import DefaultLayout from '~/layouts/Default.vue'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Layout', DefaultLayout)
  if(process.isClient) {
    const confetti = require('vue-confetti').default
    Vue.use(confetti)
  }
}

The page where the confetti should be shown looks like this (i took the default About.vue which is already existing in a fresh gridsome starter project):

About.vue (created by default in gridsome starter project):

<template>
  <Layout>
    <h1>About us</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error doloremque omnis animi, eligendi magni a voluptatum, vitae, consequuntur rerum illum odit fugit assumenda rem dolores inventore iste reprehenderit maxime! Iusto.</p>
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
    <button @click="love">Show some love</button>
  </Layout>
</template>

<script>

export default {
  metaInfo: {
    title: 'About us'
  },
  methods: {
      start() {
        this.$confetti.start();
      },

      stop() {
        this.$confetti.stop();
      },

      love() {
        this.$confetti.update({
          particles: [
            {
              type: 'heart',
            },
            {
              type: 'circle',
            },
          ],
          defaultColors: [
            'red',
            'pink',
            '#ba0000'
          ],
        });
      }
    }
}
</script>

I hope this helps.

Best regards, ewatch