Trying to use official VueJS libraries with browser ESM CDN imports

Official VueJS libraries, e.g. vue-router, are simultaneously dependencies and dependents of vue, seemingly making those impossible to use with ESM CDN import statements without using <script type="importmap">, which isn't supported everywhere.

VueJS standalone boilerplates

Basic, working

Full code snippet :

<script type="module">
    import { createApp } from 'https://unpkg.com/[email protected]/dist/vue.esm-browser.js';
    const app = createApp({
        template: `
            <p>
                Hello,
                <br>
                World !
            </p>
        `
    });
    document.addEventListener('DOMContentLoaded', () => app.mount('.app'));
</script>
<body class="app"></body>

JSFiddle : 7y6v8rse

Full, working

Tree :

.
├── index.html
└── src
    ├── app.js
    └── components
        ├── App.css
        ├── App.js
        ├── AppMain.js
        ├── AppMainMessage.css
        └── AppMainMessage.js

Source code repository: KaKi87/template-vue3-cdn

Although this template will not be used here, it aims to illustrate how close we can get to a bundled project development experience without bundling.

Import attempts

Raw `*.esm-browser.js` import with `<script type="importmap">`, working

Full code snippet :

<script type="importmap">
    {
        "imports": {
            "vue": "https://unpkg.com/[email protected]/dist/vue.esm-browser.js",
            "@vue/devtools-api": "https://unpkg.com/@vue/[email protected]/lib/esm/index.js"
        }
    }
</script>
<script type="module">
    import { createApp } from 'https://unpkg.com/[email protected]/dist/vue.esm-browser.js';
    import { createRouter, createWebHistory } from 'https://unpkg.com/[email protected]/dist/vue-router.esm-browser.js';
    const app = createApp({
        template: `
            <router-view>
            </router-view>
        `
    });
    app.use(createRouter({
        history: createWebHistory(),
        routes: [
            {
                path: '/:pathMatch(.*)*',
                component: {
                    template: `
                        <p>
                            Hello,
                            <br>
                            World !
                        </p>
                    `
                }
            }
        ]
    }));
    document.addEventListener('DOMContentLoaded', () => app.mount('.app'));
</script>
<body class="app"></body>

JSFiddle : ms4hgbpe

Raw `*.esm-browser.js` import without `<script type="importmap">`, failing

JSFiddle : zpx9shfu

Error :

Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Transpiled `*.js` imports using various CDNs, all failing

CDN	File	Error	JSFiddle
`cdn.jsdelivr.net`	`esm-browser`	`Cannot read properties of null (reading 'parent')`	`kLtdpoqc`
`esm.sh`	^	^	`cjsb8phm`
^	`cjs`	^	`0m6scf5p`
^	`esm-bundler`	`Cannot read properties of undefined (reading 'value')`	`2pgz0dLc`
`cdn.jsdelivr.net`	^	^	`8gockz96`
^	`cjs`	`Cannot read properties of null (reading 'defineComponent')`	`5xsrqm6h`

Disqualified transpilation CDNs

The following CDNs are excluded from the comparison table because of not being able to export.

CDN	File	Error
`dev.jspm.io`	`esm-browser`	`The requested module '/npm:vue@3' does not provide an export named 'computed'`
^	`esm-bundler`	^
^	`cjs`	HTTP 500
`cdn.skypack.dev`	`esm-browser`	`"[email protected]" could not be built. (Imported by "vue-router")`
^	`esm-bundler`	^
^	`cjs`	^

KaKi87/trying-to-use-official-vuejs-libraries-with-browser-esm-cdn-imports.md