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
Note: This might be for Vite only, not sure about other ESM eager loaders.
I noticed
turbo-mountalways 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
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