Skip to content

Feature: AsyncVue plugin, which loads components using Vue's defineAsyncComponent? #29

Description

@dmix

Note: This might be for Vite only, not sure about other ESM eager loaders.

I noticed turbo-mount always imports every Vue component by default on every page, even if Stimulus isn't calling that particular component.

I wrote my own version of turbo-mount before discovering this project and the way it worked is that when a stimulus component connected it uses async imports to only import the relevant components on the page

For turbo mount I created this plugin to extend the Vue plugin

import { createApp, defineAsyncComponent } from 'vue'

// TurboMount Plugin<App> implementation
const plugin = {
  mountComponent: ({ el, Component, props }) => {
    const AsyncComponent = defineAsyncComponent(Component)
    const app = createApp(AsyncComponent, props || {})
    app.mount(el)
    return () => app.unmount()
  },
}

export default plugin

Which would essentially either be built in via the existing plugin + an async flag
https://github.com/skryukov/turbo-mount/blob/main/packages/turbo-mount/src/plugins/vue/index.ts or a separate AsyncVue plugin

Let me know what you think and I can contribute a PR

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions