Nuxt3 config to fetch the data from rest api and generate static page based on fetched data

I'm trying to generate a static page with nuxt 3 but no luck. I fetch the data from wordpress rest api (https://172.27.0.4/wp-json/...), nuxt works on http://0.0.0.0:3000, so I added this to nuxt.config.ts to solve CORS:

  nitro: {    devProxy: {'/wp-json': {        target: process.env.API_URL +'/wp-json',        changeOrigin: true,        secure: false,      },    },  },

With this I can see the data from 172.27.0.4/wp-json/... on this address: http://0.0.0.0:3000/wp-json/....

And here's my /pages/index.vue:

<template><div class="work-tiles"><div v-for="post in posts" :key="post.id">      {{post.title}}</div></div></template><script setup>import { useAsyncData } from 'nuxt/app'const { data: posts } = useAsyncData('posts', () => $fetch('http://0.0.0.0:3000/wp-json/sar/v2/work/posts'));console.log(posts.value)</script>

With console.log(posts) I can see the data in browser console, but I see null in the terminal. I thought I would see an array in the terminal too... If you know why, please let me know.

By the way, I don't know how to modify nuxt.config to get rid of http://0.0.0.0:3000 from $fetch('http://0.0.0.0:3000/wp-json/sar/v2/work/posts')) to make it look like: $fetch('/wp-json/sar/v2/work/posts')) and still fetch the data from the wordpress. Perhaps this is the reason of my issues...

My full nuxt.config.ts:

export default defineNuxtConfig({  devtools: {enabled: true},  nitro: {    devProxy: {'/wp-json': {        target: process.env.API_URL +'/wp-json',        changeOrigin: true,        secure: false,      },    },  },  target: 'static',  generate: {    routes: ['/'],  },  compatibilityDate: '2024-11-16',});

Here's the command I use to generate a static page:npx nuxi generate

It makes .output directory, I open index.html in there hopefully to find posts titles in html or fetched data there, but there are empty div and error (couldn't fetch):

But using npm run dev I can see the data and html from the source code pressing (CTRL + U) in chrome.

Where am I wrong?

UPDATE:

to see fetched data in the terminal on console.log(posts.value) I had to add await to useAsyncData:

const { data: posts } = await useAsyncData('posts', () => $fetch('http://0.0.0.0:3000/wp-json/sar/v2/work/posts'));

UPDATE 2:

There's something on my side. I tried a fake api const { data: posts } = await useAsyncData('posts', () => $fetch('https://jsonplaceholder.typicode.com/todos/')); and the page successfully generated without any specific nuxt.config.ts:

export default defineNuxtConfig({  compatibilityDate: '2024-11-16',  nitro: {    prerender: {      routes: ['/'], //doesn't play a big role    },  },});