[Vuejs]-Vue: setting up computed properties so that BOM is available

by

0👍

✅

So after some research I found out that:

  1. screen is only availible after the mount hook as Stephan-v suggested

  2. screen is not changing unless you change the Browser Configuration

  3. To make my template respond to the availible screen I need to write an Eventlistener that listens to the ‘resize’ event of window which can look like this:

     mounted() {
    window.addEventListener('resize', this.resize);
 },
 beforeDestroy: function () {
    window.removeEventListener('resize', this.resize);
 },

in the method this.resize you will have full access to the BOM.

0👍

You need to perform your logic in the mounted or beforeMount lifecycles because that is the only way to ensure you are actually in a browser environment.

At that point you could simply set a data property to the required window object and read it from there. I am not sure how this would be implemented with a computed property. But the question is; do you really need this to be a cached property to begin with?

Leave a comment