Guide for `setup` should make it clear that setup has to be synchronous.

[LinusBorg]

I've encountered multiple people trying to use await in setup(), writing code like:

async setup() {
  const data = await myAPICall()

  return {
    data
  }
}

Which fails because async setup() can only be used when the component is a descendant of a Suspense component - which is an experimental feature currently only documented in the migration guide.

We could therefore add a warning to the normal Guide about setup informing users that setup() has to be synchronous and async setup() is not permitted for the normal, non-Suspense usage.

We might also document workarounds like an iife:

setup() {
  const data = ref()
  
  (
    async () => data.value = await myAPICall()
  )()

  return {
    data
  }
}

[Blakelist7]

@LinusBorg Hey, correct me if I am wrong we just have to add a warning at https://v3.vuejs.org/guide/composition-api-setup.html regarding that if we have to use async setup( ) than setup( ) has to be synchronous and also add an example that you mentioned?

[berzi]

I stumbled upon this issue while looking to open my own, since I noticed that

• Execution of my SFC with script setup would halt at the first top-level await
• No error is logged anywhere (it took me a bit to figure out what the cause was)
• The spec for script setup¹ mentions quite openly that top level awaits are supported:

Top level await can be used inside

Do I have to surmise that this is planned but not yet implemented? It would frankly be very nice to have, instead of having to keep it synchronous.

¹ which as far as I know is currently the only place one can get exhaustive documentation on the features and syntax of script setup, correct me if I'm wrong.

[LinusBorg]

@berzi The API Dcos for script-setup tell you it only works when nested in a Suspense component - like using await in a normal setup function.

[LinusBorg]

@Blakelist7 Sorry for having missed this. The answer is "Yes".

[berzi]

@berzi The API Dcos for script-setup tell you it only works when nested in a Suspense component - like using await in a normal setup function.

@LinusBorg I think at least a console error should be outputted if the user tries it, otherwise debugging what went wrong can be very hard. All you see is the whole component not rendering anything despite parts of its script executing normally.