how to use await in tag <script setup>

[syifeng]

<script setup async>
import { ref, watch } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import { getMedInfos } from './api/medInfo'
const msg = ref('msg')
export const medInfos = await getMedInfos(1, 10)
</script>

when I use the await function in the tag '<script setup>' I got the error

<script setup> cannot contain ES module exports what should i do thanks for the answer

[CyanSalt]

BTW I think the setup() method should be synchronous in this case. Maybe you need to use watchEffect to wrap asynchronous processes.

[aykxt]

- export const medInfos = await getMedInfos(1, 10)
+ const medInfos = await getMedInfos(1, 10)

You should not export variables as they are already available by default in script setup.

Any top-level bindings (both variables and imports) declared inside <script setup> are directly exposed to the template render context Read more

[Shyam-Chen]

Top level await

<script setup>
  const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>

[yyx990803]

It "just works". But make sure to call all lifecycle and watch methods before the first await since those rely on the presence of the current active instance (we have been discussing how to detect and guard against this via tooling)

[hairyf]

Include the current component through the asynchronous component

<Suspense>