Как в Nuxt сгенерировать страницы по результатам ответа api?

Question

[Антон Швец]

Есть структура папок

pages
|  index.vue
| posts
|  |  index.vue
|  |  _post.vue

в posts/index.vue я получаю с сервера массив со список постов, рендерю "оглавление", по клику запрашивается пост, рендерится и отображается.
После nuxt generate в папке posts получаю один index.html
В итоге работает только запрос к /posts, запрос к /posts/postname разумеется приводит к 404. Можно сделать перенаправление на индекс, но это уже не SSR.
Можно ли nuxt указать рендерить страницы по полученному списку?

Answer 1

[Антон Швец]

Сам же и отвечу в nuxt.config.js

generate: {
    routes: async function () {
      /* получить список постов, у которых есть свойство postname */
      const { data: posts }  = await axios.get('https://mydomain/posts'); 
      /* вернуть массив адресов вида '/posts/%postname%' */
      return posts.map(u => `/posts/${u.postname}`);
    }
  },

Comments

[Timur Yessentayev]

еще можно чуть поправить (убрал posts после https://mydomain) иначе при генерации, пути html будут https://mydomain/posts/posts/postname,

generate: {
    routes: async function () {
      /* получить список постов, у которых есть свойство postname */
      const { data: posts }  = await axios.get('https://mydomain'); 
      /* вернуть массив адресов вида '/posts/%postname%' */
      return posts.map(u => `/posts/${u.postname}`);
    }
  },