Nuxt3 useAsyncData not working onMounted lifecycle hook

Question

I'm still a bit confused on what I'm doing wrong here. Essentially I have a vue component in which I want to load some data in async after element is mounted.

I'm using NUXT 3 and composition API.

<script setup>

let directories = useState('directories', () => null);

onMounted( async () => {
const { data: response } = await useAsyncData('directories', () => $fetch('/api/s3-get-directories'));
directories.value = response;
});

</script>

It seems like onMounted triggers before render and is not receiving data correctly. If I wrap on mounted into setTimeout and give 100ms delay it works fine.

I would appreciate an example of how I should load in data without blocking after client is ready. Or any explanation on what I'm doing wrong here.

Answer 1

I was missing { server: false } in options

await useLazyAsyncData('directories', () => $fetch('/api/s3-get-directories'), { server: false });

This makes it only run in front-end and not back-end.