Access vue instance in lifecycle hooks using vue composition script setup

Question

I need to access the $options property of the vue instance, yet getCurrentInstance().$options is undefined.

<script setup>
console.log(getCurrentInstance().$options) // undefined
</script>

This could be XY problem. What do you intend to do with an instance? Setup block is the place where you define an instance with variables, which you can access — Estus Flask
– Estus Flask, Commented Apr 30 at 14:42
@EstusFlask true, I was saving the bigger context for possibly another SO question, but I'm attempting to access the instance $options so I can determine if the page is reloaded through HMR. I'm intentionally resetting a store onUnmounted but that is called with HMR vs the intended purpose when leaving the page. — scader
– scader, Commented Apr 30 at 15:00
I tried that, but must have been immediately attempting getCurrentInstance().$options which is undefined, and I don't see the property in the log when expanding the object. Is options provided through other means? — scader
– scader, Commented Apr 30 at 15:07
It's getCurrentInstance().proxy.$options, I don't see the exact dupe question around and will vote to reopen it. Please, update the question with relevant details regarding $options — Estus Flask
– Estus Flask, Commented Apr 30 at 15:12

Estus Flask · Accepted Answer · 2025-04-30 15:21:30Z

2

That an instance needs to be accessed in composition API can be XY problem. Setup block is intended to define component instance with variables, which can be accessed in the block.

In other cases getCurrentInstance function can be used to access internal component instance. It's not a part of Vue public API but is suitable for exotic cases like this one (HMR).

this from options API corresponds to getCurrentInstance().proxy, it should be:

<script setup>
const options = getCurrentInstance().proxy.$options
</script>

Alternatively, script block with options API can be used together with script setup without relying on internal API, as long as they don't need to access data from each other's scopes.

answered Apr 30 at 15:21

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access vue instance in lifecycle hooks using vue composition script setup

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related