# Vue3 and ref on HTML crashes Photoshop

**URL:** <https://forums.creativeclouddeveloper.com/t/vue3-and-ref-on-html-crashes-photoshop/11438>\
**Category:** Photoshop\
**Tags:** bug, javascript, html, vue\
**Created:** [September 19, 2025, 12:36pm UTC](https://forums.creativeclouddeveloper.com/t/vue3-and-ref-on-html-crashes-photoshop/11438 "2025-09-19T12:36:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![blackRGB](https://avatars.discourse-cdn.com/v4/letter/b/58f4c7/32.png) [@blackRGB](https://forums.creativeclouddeveloper.com/u/blackRGB)\
**Post date:** [September 19, 2025, 12:36pm UTC](https://forums.creativeclouddeveloper.com/t/vue3-and-ref-on-html-crashes-photoshop/11438/1 "2025-09-19T12:36:34Z")

</div>

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()`

---

<div class="post-metadata">

**Author:** ![blackRGB](https://avatars.discourse-cdn.com/v4/letter/b/58f4c7/32.png) [@blackRGB](https://forums.creativeclouddeveloper.com/u/blackRGB)\
**Post date:** [September 19, 2025, 6:46pm UTC](https://forums.creativeclouddeveloper.com/t/vue3-and-ref-on-html-crashes-photoshop/11438/2 "2025-09-19T18:46:47Z")

</div>

**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!

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![plugisto](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/plugisto/32/1184_2.png) [@plugisto](https://forums.creativeclouddeveloper.com/u/plugisto)\
**Post date:** [September 23, 2025, 2:37pm UTC](https://forums.creativeclouddeveloper.com/t/vue3-and-ref-on-html-crashes-photoshop/11438/3 "2025-09-23T14:37:16Z")

</div>

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

> [@scrollTo / scrollTop crashes Photoshop](https://forums.creativeclouddeveloper.com/t/scrollto-scrolltop-crashes-photoshop/11335):
>
> Hi, I use Vue3 (with Bolt UXP framework) in my current project. It’s supposed to be a chat app and I need to scroll the content down to the bottom. But as soon as I use scrollTo or scrollTop Photoshop crashes. Fun fact: the UXP Developer Tool debug window also closes in that moment so that you can’t see what the last log was. That’s fun! Someone has experienced the same? Thanks!