Skip to content

Build module as stand alone plugin for Vue/ol using umd #427

Open
@disarticulate

Description

@disarticulate

Is your feature request related to a problem? Please describe.
I'm trying to build a page without a bundler and importing scripts like:

    <!-- Quasar -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.18.1/dist/quasar.umd.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@v2/dist/icon-set/fontawesome-v6.umd.prod.js"></script>

    <!-- Open Layers -->
    <script src="https://cdn.jsdelivr.net/npm/ol@10.5.0/dist/ol.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-contextmenu"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol-ext@4.0.31/dist/ol-ext.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue3-openlayers@11.6.0/dist/vue3-openlayers.umd.cjs"></script>

Describe the solution you'd like
vue3-openlayers.umd.cjs does not import as a umd module usually does because commonjs isn't used by browsers. I tried the ESM module, but the stack above (quasar, et al) would all need to be re worked. Future libraries would also be limited to ESM.

If I could use a script vue3-openlayers and introduce my vue app and inject the necessary open layers packages, it should work.

Describe alternatives you've considered
The alternative is to find ESM versions of all the libraries I'm using now and in the future. Typically, there's not much needed to get a UMD module, but there needs to be a bootstrap pointing to the correct libraries (vue, ol) or checking globals. When using vue in umd the global is Vue. When using openlayers the global is ol.

It looks like we'd need to augment: https://github.com/MelihAltintas/vue3-openlayers/blob/main/src/index.ts and create some kind of loader function from global variables. I'm not versed in typescript.

I can provide a working template to test if needed.

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