Where to fetch data when using Composition API (Vue 3)?

[gamaralf]

In Vue 2, it seemed to be consensus that the adequate place to put code that fetches external data was the "created" hook.

However, for Vue 3, I could not find a similar guideline. And it seems that there is no "created" hook
when using the Composition API to build a component. See https://vuejs.org/api/composition-api-lifecycle.html

So, where should I place code to fetch data from an HTTP source in a component using the Composition API? Directly within "<script setup>"? In a "onMounted" hook function?

I am talking about fetching data from the browser, no SSR involved here.

[Shyam-Chen]

<script lang="ts" setup>
async function myPost() { 
  const post = await fetch(`/api/post/1`).then((r) => r.json());
}

myPost(); // <- created
</script>

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted

---

Top-level await with <Suspense>

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