Vue defineAsyncComponent in build

To address the issue of dynamically loading Vue components in a production build with Vite, you need to ensure that the components are bundled correctly during the build process. The problem arises because Vite's build process doesn't know about the dynamic imports and thus doesn't include them in the final bundle.

Here's a solution to handle this scenario:

1. Use a dynamic import with a known path: Instead of directly using the path from the database, you can map the paths to the actual components. This way, Vite can include these components in the build.

2. Create a mapping of components: Create a mapping of your component paths to the actual component imports. This can be done in a separate file.

3. Modify the loadComponent function: Use the mapping to dynamically import the components.

Here's how you can implement this:

Step 1: Create a Component Mapping

Create a file componentMapping.js in your project:

// componentMapping.js
export const componentMapping = {
  'TimerLayout': () => import('@/Templates/dynamic/TimerLayout.vue'),
  // Add other components here
  // 'AnotherComponent': () => import('@/Templates/dynamic/AnotherComponent.vue'),
};

Step 2: Modify the loadComponent Function

Update your loadComponent function to use the mapping:

// Your Vue component script
import { defineAsyncComponent } from 'vue';
import { componentMapping } from '@/componentMapping';
import LoadingComponent from '@/components/LoadingComponent.vue';
import MissingComponent from '@/components/MissingComponent.vue';

function loadComponent(componentName) {
  const loader = componentMapping[componentName];
  if (!loader) {
    return MissingComponent;
  }

  return defineAsyncComponent({
    loader,
    loadingComponent: LoadingComponent,
    delay: 200,
    errorComponent: MissingComponent,
    timeout: 3000,
  });
}

Step 3: Use the Component Name in Props

Ensure that the props.template contains the component name (e.g., 'TimerLayout') instead of the full path:

const props = defineProps({
  template: String, // e.g., 'TimerLayout'
  blocks: Array,
  template_id: { type: Number, default: -1 },
});

Step 4: Update the Template

Use the loadComponent function in your template:

<template>
  <div class="flex">
    <div id="editor-sidebar" class="bg-primary-100 min-w-fit relative dark:bg-primary-900 dark:text-primary-100"></div>
    <main id="main" class="relative w-full min-h-screen">
      <div>
        <component :is="loadComponent(props.template)" :blocks="props.blocks" :layout_id="props.template_id">
          <slot />
        </component>
      </div>
    </main>
    <div id="revisions-sidebar" class="min-w-fit"></div>
  </div>
</template>

Summary

By creating a mapping of component names to their respective import functions, you ensure that Vite can include these components in the build. This approach allows you to dynamically load components based on a name stored in the database while still benefiting from Vite's bundling and optimization.

This solution should work both in development and production environments.