Issue: 3097

How to use dynamic NON-async components for nuxt generate

[issue link]

I have a 2D array of posts like so:

const posts = [

I want to have a generic page component that IS async

const Page0 = () => import('../components/BlogPages/Page0')


  <abstract-page :page="0"/>

I want to have the post components within that page NOT async BUT still dynamic (so I can loop over the array) I want each instance of AbstractPage to be generated as one .js file.

  <div v-for="postRoute of posts[page]">
    <component :is="postComponents.find(comp => comp.route === postRoute)"/>

for (const postRoute of posts[this.page]) {
    const filename = routeToComponentFilename(postRoute)
    let esComponent = await import(`../PromoCards/${filename}`)
    const component = {
      route: postRoute,
      component: esComponent.default

My end goal for network requests (simplified) is:
GET index.html
GET app.js
GET page0.js <-- precompiles the dynamic NON async post components

here is my repo for more context: https://github.com/Coletrane/mountain-bike-virginia/tree/posts-json-authors-json

This question is available on Nuxt.js community (#c2681)