0

Vue.js documentation states different syntax given the vue.js (CDN- or ESM-) build used. What is a CDN build an what do justify two different kind of build with as a consequence a different usage syntax ?

from vue.js documentation:

// CDN build of Vue
const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue

// ESM build of Vue
import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
user1767316
  • 3,276
  • 3
  • 37
  • 46
  • What you called CDN is actually UMD build. The difference between ESM (ES module) and UMD (universal module) isn't specific to Vue and is explained in other existing questions. – Estus Flask Apr 23 '21 at 09:53
  • Possible duplicate of https://stackoverflow.com/questions/51233240/how-are-umd-and-commonjs-cjs-package-folders-different-and-which-should-i-use – Estus Flask Apr 23 '21 at 09:55
  • Hello @EstusFlask. The official vue.js is calling its build CDN build, this is why I try to know what kind of build it is ;-) – user1767316 Apr 24 '21 at 13:28
  • It's UMD. Its current primary use case is to be deployed separately from the app - to CDNs or else. I suppose that's the reason why it's called like that in docs. – Estus Flask Apr 24 '21 at 14:24

1 Answers1

1

A CDN is basically you importing the script the old fashioned way aka: <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

ESM build stands for ES module aka, package that you will install in your project and use thanks to a bundler (like Webpack) and use it like this: import coolMethod from 'nice-package'

It goes to say, that you usually can do the same things with both imports, but the CDN one will often be more limited/less customizable/less optimizable. So, if you can use the ESM one, go for it.

This interesting articles compares CJS, AMD, UMD and ESM variants: https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
As for the CDN one, I'd say that it is pretty much all the time the fallback and the worst one. For more info, you should probably use some google-fu here, since it's out of Stackoverflow's guidelines.

tony19
  • 125,647
  • 18
  • 229
  • 307
kissu
  • 40,416
  • 14
  • 65
  • 133
  • thank you for the link, it doesn't say what kind of build is the "CDN-build" from the vue.js documentation, but it must be a lake of precision of the vue.js documentation, I might infer the kind of build it is, given the syntax used to import package when using "CDN-builds". .. I'll carry on reading, thanks a lot. – user1767316 Apr 24 '21 at 08:57
  • For now I do not find the CDN import syntax in the possible build types described in [this](https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm) post, would anyone have an idea ? – user1767316 Apr 24 '21 at 09:08