Vue3 and ref on HTML crashes Photoshop

Photoshop
, , ,
1

Hello, colleagues! I wanted to share a solution to an issue with Vue 3 working alongside UXP. Overall, Vue works quite well with UXP (thanks, of course, to Bolt UXP), but there’s one caveat. Sometimes you need to access an HTML element directly. Vue provides the ref attribute for this purpose - you can attach it to an element, e.g., <div ref="myElem"> - and then, by declaring a reactive variable const myElem = ref(), you’ll get the native HTML element inside myElem.value.

The problem is that if you try to call methods on the element or overwrite any of its properties, Photoshop crashes. Reading properties works fine, but any write operations or method calls cause the crash. Because of this, I had to avoid this approach and instead use the classic way of selecting HTML elements, such as .getElementById()

1 Like
2

The solution: wrap your reference in toRaw(myElem.value). This converts the Proxy object into a regular object, and everything then works perfectly. I’m not sure exactly what’s happening under the hood, but the issue definitely lies with the Proxy. I hope this post helps someone!

<template>
...
<div ref="myElem">Item</div>
...
</template>

<script setup>
import { toRaw } from 'vue'

const myElem = ref(null)

function scrollToItem (){
  if (myElem.value) {

    //Crashes PS
    myElem.value.scrollIntoView({ behavior: 'smooth', block: 'center' });

    // Works Fine!
    toRaw(myElem.value).scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
}

</script>
1 Like
scrollTo / scrollTop crashes Photoshop
3

Just finding an element the old way with Javascript also works. Thanks again for the tip. toRaw is a more elegant solution.