Please elaborate on how to deal with browser resizing

[moritzsalla]

I am aware the documentation includes a small section on missing events but I am unable to implement this with the information given.

[Kinrany]

Here's an example:

<div id="app">
  <!-- `windowresized` is lowercase! -->
  <vue-p5 v-on="{setup, draw, windowresized}"></vue-p5>
</div>

new Vue({
  el: '#app',
  data() {
    return { text: 'Hello p5!' };
  },
  methods: {
    setup(sketch) {
      sketch.resizeCanvas(200, 100);
    },
    draw(sketch) {
      sketch.background('green');
      sketch.text(this.text, 20, 20);
    },
    windowresized(sketch) {                          // also lowercase!
      const width = sketch.windowWidth;
      const height = sketch.windowHeight;
      this.text = `size: (${width}, ${height})`;
    }
  }
});

Codepen: https://codepen.io/Kinrany/pen/zYGoxNK

---

Note the gotcha: it must be lowercase windowresized instead of windowResized.

I even made the same mistake in the documentation, haha. Thanks for making me aware of this.

Also note that windowResized is already defined (the full list of supported events is available here), so there's no need to use additionalEvents in this case. (Btw, does the name of the prop make sense?)

[moritzsalla]

Great, thanks!

[Kinrany]

You're welcome 🙂