Vue 3, Nuxt 3 and Vite: Dynamic import components using api data

<template>
  <div>
    <component 
    v-once
    v-for="(component, index) in components" 
    :is="component.component"
    v-bind="component.data"
    :key="index"
    />
  </div>
</template>

<script>
  import { defineAsyncComponent } from 'vue';

  export default {
    data:()=> ({
      page: {},
      components: []
    }),
    async created() {
      // dataset
      const page_req = await fetch('/data/page-data.json')
      const {components, ...page) = await page_req.json()

      this.page = page

      // import components
      if (components) {
        const dynamic_components = components.map((component)=> {
          const {type, ...data} = component;
          // split the data and the component instance so you can v-bind the data easier in the template
          return {
            data: data,
            component: defineAsyncComponent(() => import(`../components/Module/${type}.vue`))
          }
        })

        // download all components over the network before rendering the page
        // otherwise the page jumps around as components load in
        await Promise.all(dynamic_components.map((component)=> {
          return component.component.__asyncLoader()
        }))

        // we do not want components to be reactive data, this can cause performance issues, so we freeze the object
        // vue understands frozen objects should not be reactive.
        this.components = Object.freeze(dynamic_components)
      }
    }
  }
</script>

<template>
  <div>
    <component 
    v-once
    v-for="(component, index) in components" 
    :is="component.component"
    v-bind="component.data"
    :key="index"
    />
  </div>
</template>

// composition api
<script setup>
import { defineAsyncComponent } from 'vue';

// dataset (local data, or you can fetch from an api)
const page = await import('~/static/data/some-page-of-components.json')
let components = []

// import components
components = page.components.map((component)=> {
  const {type, ...data} = component;
  // split the data and the component instance so you can v-bind the data/props easier in the template
  return {
    data: data,
    // A note is that if you use path aliases for dynamic imports like @ or ~ you might experience issues.
    component: defineAsyncComponent(() => import(`../components/Module/${type}.vue`))
  }
})
</script>