Home

I have a 2D array of posts like so:

const posts = [
    [
        'post-route-0',
        'post-route-1'
    ],
    [
        'post-route-2',
        'post-route-3'
    ]
]

I want to have a generic page component that IS async
index.vue:

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

Page0.vue:

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

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.
AbstractPage.vue:

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

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

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