vue vite dynamic components import

Question

I am migrating an existing laravel ineria from mix to vit.

I did all the steps in the migration guid and everything works fine except for one thing.

I have a component receives a prop conatains an array of components.

I used to require them like this (inside a loop)

...

this.$options.components[component_name] = require(`@/Pages/Components/Inputs/${component_name}`).default

...

this wont work with vite because of "require", I have to replace it with import

so I tried these ways and none of them works

this.$options.components[component_name] = () => resolvePageComponent(`./Pages/Components/Inputs/${component_name}.vue`, import.meta.glob('./Pages/**/*.vue'))


this.$options.components[component_name] = () => resolvePageComponent(`@/Pages/Components/Inputs/${component_name}.vue`, import.meta.glob('./Pages/**/*.vue'))

this.$options.components[component_name] = resolvePageComponent(`./Pages/Components/Inputs/${component_name}.vue`, import.meta.glob('./Pages/**/*.vue'))

this.$options.components[component_name] = resolvePageComponent(`@/Pages/Components/Inputs/${component_name}.vue`, import.meta.glob('./Pages/**/*.vue'))

all of them throws the same exception

"Uncaught (in promise) Error: Page not found: ./Pages/Components/Inputs/Text.vue".

unfortunately no, I can not move to vite untill this problem solved. — Moauya Meghari, Aug 17 '22 at 08:53
@iiiml0sto1 checkout the answer to this question if you still need it! — Moauya Meghari, Aug 15 '23 at 18:52

score 0 · Accepted Answer · answered Aug 15 '23 at 18:51

so, this is how I solved it.

you need to import this

import {defineAsyncComponent} from "vue";

on the data, defin this is an empty array

layout_components: []

on the created or mounted you need to define this

mounted() {
    this.layout_components = Object.keys(this.$options.components)
    this.layouts.forEach(layout => this.importLayoutComponent(layout))
}

this will get the componsents you are using and add them to an array

finally,

I created this method to import the components dynamicly

importLayoutComponent(layout) {
    if (!this.layout_components.includes(layout.name)) {
        this.layout_components.push(layout.name)
        this.$options.components[layout.name] = defineAsyncComponent(() => import(`../Sections/${layout.type}/${layout.name}.vue`))
    }
}

in my html template

<component
  :is="layout.name"
  ... //other propes to pass to the component
/>

NOTE: you need to write the path to the component like this "../path-to-component"

vue vite dynamic components import

1 Answers1

Linked