Composables usage restrictions

[Mini-ghost]

I'd like to know what everyone think about those usage restrictions of composable. Those usage restrictions are imentioned in the official documentation, but I found many cases where those restrictions are not respected.

The following is excerpted from the documentation:

https://github.com/vuejs/docs/blob/e39b5d1175d476170319adf7c916abd4820800c0/src/guide/reusability/composables.md?plain=1#L278-L290

Usage Restrictions

Composables should only be called synchronously in <script setup> or the setup() hook. In some cases, you can also call them in lifecycle hooks like onMounted().
These are the contexts where Vue is able to determine the current active component instance. Access to an active component instance is necessary so that:

1. Lifecycle hooks can be registered to it.
2. Computed properties and watchers can be linked to it, so that they can be disposed when the instance is unmounted to prevent memory leaks.

According to the content, we SHOULT NOT use the composable API like following examples.

Example 1

<script setup lang="ts">
async function onClickToFetch() {
  const { data } = await useFetch(async () => {
    // await api
  })
}
</script>

<template>
  <button type="button" @click="onClickToFetch">
    Fetch
  </button>
</template>

Example 2

<script setup lang="ts">
watch(elementRef, (element) => {
  useEventListener(element, 'click', () => {
    // do something...
  })
})
</script>

Example 3

<script setup lang="ts">
onMounted(() => {
  useInfiniteScroll(window, () => {
    // do something...
  })
})
</script>

---

Some great libraries (such as: VueUse ) has handled those misuses so that they don't lead to major errors. But we can't guarantee that every community projects can handle this issue properly, so i have some suggestions:

1. Place those usage restrictions more prominently in documentation and highlight it.
2. Suggesting community projects to warn users when they exceed the usage restriction.
3. Add rules to Vue's official eslint plugin.

I'm not sure if this is taken seriously, but I think following it will reduces the mental load of understanding the code.

I'd like to hear your opinions on this suggestion, Thanks!

[scvnc]

Another related topic, I'd like some discussion on using a composable outside of the vue setup function.

IMO, this should not happen, however I know some people would disagree.

axios.interceptors.response.use(function (response) {
    useSnackbar().post('Request successful!')
    return response;
  })

[Mini-ghost]

I can't agree with you more. We should avoid as much as possible using any composable outside of vue context.

[scvnc]

@Mini-ghost I agree that somewhere there should exist the examples you have provided to hit this home more. I found this issue ticket to be interesting vuejs/docs#1293

Maybe a PR can be made to the docs providing some examples similar to what you have provided. I have started a minimal PR here, also collecting opinions.

Perhaps a list of "DOs and DO Nots" examples.

I think your example 3 may be fine according to the docs.

[Mini-ghost]

@scvnc You rock!

but example 3 maybe will look like:

<script setup lang="ts">
onMounted(() => {
  onMounted(() => {
    // do something...
  })
})
</script>

Nested onMounted doesn't work there though he won't warn.