[vue v3] How to access to internal props from app.config.errorHandler via component instance

[anhnhoktvn]

Inside setup section. I have something like:

<script setup>
let prop1 = 123
function f1 () {
  // ...
}

is there a way to access prop1 and/or f1 outside of the component.
for example: when I got an error from
app.config.errorHandler

could I acess to those props ?. somethig like

app.config.errorHandler = (err, instance, info) => {
  // handle error, e.g. report to a service
  instance.f1(/*...*/)
  console.log(instance.prop1)

}

[marcosgomesneto]

@anhnhoktvn
You can use defineExpose:

Comp1.vue

<script setup>
let prop1 = 123
function f1 () {
  // ...
}

defineExpose({
  f1,
  prop1
})

Now you can access with ref:

Comp2.vue

//Comp2.vue
<script setup>
const compRef= ref()

app.config.errorHandler = (err, info) => {
  compRef.value.f1()
  console.log(compRef.value.prop1)
}
</script>

<template>
   <Comp1 ref="compRef" />
</template>

Note: You can only access the compRef value after mounting the component
If this answer helped you, consider marking it as answered.

[anhnhoktvn]

Hi, sorry for the unclear question. In my case, inside app.config.errorHandler, it seems that I can not get access to compRef directly

[marcosgomesneto]

Sorry, when I was writing, I ended up making a typing mistake. I edited the code above, but here it is again:

Instead of comp1, write compRef, which is the reference we created for component 1.

comp1.value.f1(); to compRef.value.f1();
console.log(comp1.value.prop1); to console.log(compRef.value.prop1);

app.config.errorHandler = (err, info) => {
  compRef.value.f1();
  console.log(compRef.value.prop1);
}

As mentioned earlier, compRef will only be available after the mounting of component 2. To ensure that you are accessing it correctly, you can use onMounted. I need more details about your code. Is it a Single Page Application (SPA) or Server-Side Rendered (SSR)? When is the errorHandler function being called? Try a test by adding a <button @click="() => compRef.f1()"/>; you will see that it works.

[marcosgomesneto]

Another important thing, note that in the component 2 template the ref property must not be a v-bind, that is, it must not have ":" do the <Comp1 ref="compRef"... ref without ":", It has to be exactly as I showed in the example.

[marcosgomesneto]

Check example Playground

[marcosgomesneto]

@anhnhoktvn

Let me know if you got it. If yes, mark the answer as "answered".