UMD build

[privatenumber]

What problem does this feature solve?

vue-next currently has ESM and global builds for the browser but I noticed it doesn't have a UMD build (whereas v2 does).

While ESM might be the future standard for loading dependencies on the web, it's not ubiquitous yet. And global works, but it pollutes the global scope and requires synchronous loading or a callback. Personally, I default to using SystemJS with the AMD plugin to load dependencies (incl. Vue) in environments where I don't have a bundler (eg. prototyping on a code playground).

UMD and AMD are still very popular module definitions for JS, and I was wondering if there was any consideration for using it as one of the bundle types for v3.

What does the proposed API look like?

UMD

[yyx990803]

If you are prototyping, then browser support of ESM isn't really an issue. And SystemJS should work with ESM builds, isn't that what it's all about?

For production there is no point in providing UMD either, since you will be bundling and all major bundlers support ESM today.

Also if you are prototyping with Vue 3 without a bundler, you really should be using https://github.com/vuejs/vite.

[privatenumber]

SystemJS doesn't seem to support ESM right now (FR).

I can give you a real example of a production scenario where UMD/AMD would be useful:

We have a large codebase that builds using Webpack with some heavy configuration (server build, mobile build, i18n builds). To help improve build performance and distribution size, we're considering externalizing dependencies with UMD/AMD distributions to a CDN.

With Vue 3, we can't import the ESM bundle (even with SystemJS) because Webpack doesn't seem to support ESM yet.

We can use the global distribution w/ SystemJS, but as I said it's not ideal due to global pollution. To integrate products (Vue apps) from different teams, we are considering the micro-frontends architecture to mount multiple Vue apps (and versions) on one page.

[joeldenning]

I help maintain systemjs, and we are discussing this in systemjs/systemjs#2272. One thing to note is that SystemJS can't even load Vue as a global variable, since the vue library creates multiple global variables (Vue, devtoolsFormatters, __VUE__, __VUE_HMR_RUNTIME__), so SystemJS cannot programmatically determine which one to treat as the loaded module.

[cbdyzj]

Same issue when I writing userscript with requirejs. This is my solution.
https://www.npmjs.com/package/vue-umd

[yuhenabc]

you can use global Vue + self write vue.amd.js

global Vue:

<!-- development -->
<script src="https://unpkg.com/vue@3.3.4/dist/vue.runtime.global.js"></script>
<!-- production -->
<script src="https://unpkg.com/vue@3.3.4/dist/vue.runtime.global.prod.js"></script>

vue.amd.js:

/* eslint-disable */
define(function () {
  return window.Vue
})