https://github.com/w99910/dynamic-registration-async-vue-components

Register asynchronous VUE components dynamically
https://github.com/w99910/dynamic-registration-async-vue-components

Last synced: about 13 hours ago
JSON representation

Register asynchronous VUE components dynamically

• Host: GitHub
• URL: https://github.com/w99910/dynamic-registration-async-vue-components
• Owner: w99910
• License: mit
• Created: 2024-02-20T08:56:47.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-02-20T08:59:43.000Z (11 months ago)
• Last Synced: 2024-11-27T19:14:10.232Z (2 months ago)
• Language: Vue
• Size: 13.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Register asynchronous VUE components dynamically

```js

import { createApp, defineAsyncComponent } from 'vue'

import App from './App.vue';

const app = createApp(App)

const components = import.meta.glob('./components/**/*.vue');

for (let component of Object.keys(components)) {

    let paths = component.split('/');

    let componentName = '';

    paths = paths.slice(2, paths.length)

    paths.forEach((path, i)=>{

        componentName += path.replace('.vue','');

        if(i !== paths.length - 1){

            componentName += '.'

        }

    });

    app.component(componentName, defineAsyncComponent(() => components[component]()))

}

app.mount('#app')

```