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.
Full code snippet :
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3.2.11/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
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.
Full code snippet :
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3.2.11/dist/vue.esm-browser.js",
"@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@6.1.4/lib/esm/index.js"
}
}
</script>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3.2.11/dist/vue.esm-browser.js';
import { createRouter, createWebHistory } from 'https://unpkg.com/vue-router@4.0.14/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
JSFiddle : zpx9shfu
Error :
Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
| 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 |
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 |
"vue@v3.2.31" could not be built. (Imported by "vue-router") |
| ^ | esm-bundler |
^ |
| ^ | cjs |
^ |