[Vuejs]-Window is undefined error, when loading node_module package in a component

by

0👍

✅

After struggles i came up with this approach and did work for me

<script>

let PickrInstance;

if(process.browser){
   PickrInstance = require('@simonwep/pickr/dist/pickr.min.js')
}

let  pickr;

export default {
  name: "ColorPicker",
  mounted(){
    pickr = PickrInstance.create({
          el: '.test-picker',
          theme: 'classic',
          swatches: [
              'rgba(244, 67, 54, 1)',
              'rgba(233, 30, 99, 0.95)',
          ],

      });
  }
}
</script>

0👍

You can try to wrap it in the custom Vue component (VComponent.vue) and render this component inside client-only tag

<client-only>
  <v-component />
</client-only>

...

import VComponent from './VComponent';

export default {
  components: { VComponent },
}

If it still throws an error, you can try to dynamically load your custom component. Instead of import VComponent from './VComponent' use:

const VComponent = () => import('./VComponent');

Leave a comment