components requiring packages / external JS

[ajl199]

Sorry first that I'm not sure I've got this question entirely clear in my own mind. I'll do my best to express what I'm trying to achieve. If it's already answered somewhere, the chances are that my grasp of the terminology is too weak to recognise it as my question.

I've recently discovered vue3-sfc-loader, which is brilliant, enabling us to create little Vue mini-apps within pages of a fairly complex website, from reusable single file components. Our codebase is looking much tidier and better ordered, and ability to share those SFCs with built apps is fantastic. The one and only drawback at the moment is that where a component relies on an external javascript package or file, I'm having to include that in the parent page because I've not identified a way of getting it into the SFC where in a built app with the package in its environment I'd use import.

For example:

• data display page (a PHP-generated, CMS-managed page on the website)
  |
  • data display SFC (a one-off Vue3 SFC which is effectively the base-app for displaying these data, requires our AJAX library)
    |
    • map & info panel SFC (a Vue3 SFC providing a map element and an info. panel, used in various places across the site)
      |
      • map SFC (A Vue3 component providing a map, requires Leaflet and LeafletMarkerCluster)

Currently, I load Leaflet, LeafletMarkerCluster and the plain JS AJAX library file, along with their CSS as applicable, in the header of the data display page. The problems with that are that the person constructing that page may not know the requirements of the component tree and if, for instance, future enhancements to the map SFC invoke a new dependency, all pages which ultimately use it will need to be updated. Obviously, things would be much tidier if I could have the SFCs with requirements responsible for importing (or equivalent) what they need, but I've failed to find out how despite much Googling. I'm sure there probably is a way or ways, but don't know what or which might technically be best.

We can host built modules somehow if that's what's needed, or bring them in directly from CDN, import them with normal syntax or inject them into the page headers from a created/mounted hook. I'm pretty flexible as long as the solution is reasonably universal and effective. Pointers and ideas would be really welcome.

Many thanks in advance.