N
Nuxt•4w ago
BM Electro

defineExpose not working as expected

Hello all, In my component I have a script setup with defineExpose This is in Nuxt 3 
<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch<ApiRes>(url)
defineExpose({ refresh })

</script>
<script setup lang="ts">
const { data, status, error, refresh, clear } = await useFetch<ApiRes>(url)
defineExpose({ refresh })

</script>
Parent component like this works 
const myref = useTemplateRef('testRef')
myref.value.$.exposed.refresh()

</script>
const myref = useTemplateRef('testRef')
myref.value.$.exposed.refresh()

</script>
Parent component like this does not work 
const myref = useTemplateRef('testRef')
myref.value.refresh()

</script>
const myref = useTemplateRef('testRef')
myref.value.refresh()

</script>
As far as I understood it should work without going deep into the object with the $ dollar sign. Any ideas regarding this?
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @BM Electro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt 3 (and Vue 3), when you use defineExpose in a <script setup> component, the properties you expose should be directly accessible on the component instance when you access it via a template ref in the parent. That means, ideally, you should be able to do: 
const myref = useTemplateRef('testRef')
myref.value.refresh()
const myref = useTemplateRef('testRef')
myref.value.refresh()
However, if you find that you need to access the property via myref.value.$.exposed.refresh(), this suggests that the exposed properties are not being surfaced as top-level properties on the component instance as expected. The knowledge sources do not provide a direct explanation for this behavior. However, they do confirm that when using defineExpose, the exposed properties should be accessible on the component instance via the template ref, as shown in multiple examples for Nuxt UI components: 
const form = useTemplateRef('form')
// You can call form.value.submit(), form.value.validate(), etc.
const form = useTemplateRef('form')
// You can call form.value.submit(), form.value.validate(), etc.
UForm Expose API If you are not seeing this behavior, it could be due to: - The way the ref is being accessed (make sure the ref is populated after the component is mounted). - A mismatch in how the component is defined or how the ref is being used. - Potential differences between custom components and Nuxt UI components, or a bug in the current Nuxt version. Summary:
You should be able to access refresh directly via myref.value.refresh(). If you have to use myref.value.$.exposed.refresh(), this is not the expected behavior according to the documentation and examples. The knowledge sources do not provide a specific workaround or explanation for this discrepancy, so it may be worth checking your Nuxt version or reviewing how the component and ref are set up. If the issue persists, consider reporting it as a potential bug. For more on exposing component APIs, see the UForm Expose API and Vue's defineExpose documentation (linked in the Nuxt UI docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@193472337310515200> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?