vuejs
vue
Which dist file to use?
From CDN or without a Bundler
vue(.runtime).global(.prod).js:- For direct use via
<script src="...">in the browser. Exposes theVueglobal. - Note that global builds are not UMD builds. They are built as IIFEs and is only meant for direct use via
<script src="...">. - In-browser template compilation:
vue.global.jsis the "full" build that includes both the compiler and the runtime so it supports compiling templates on the fly.vue.runtime.global.jscontains only the runtime and requires templates to be pre-compiled during a build step.
- Inlines all Vue core internal packages - i.e. it's a single file with no dependencies on other files. This means you must import everything from this file and this file only to ensure you are getting the same instance of code.
- Contains hard-coded prod/dev branches, and the prod build is pre-minified. Use the
*.prod.jsfiles for production.
- For direct use via
vue(.runtime).esm-browser(.prod).js:- For usage via native ES modules imports (in browser via
<script type="module">). - Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build.
- For usage via native ES modules imports (in browser via
With a Bundler
vue(.runtime).esm-bundler.js:- For use with bundlers like
webpack,rollupandparcel. - Leaves prod/dev branches with
process.env.NODE_ENVguards (must be replaced by bundler) - Does not ship minified builds (to be done together with the rest of the code after bundling)
- Imports dependencies (e.g.
@vue/runtime-core,@vue/compiler-core)- Imported dependencies are also
esm-bundlerbuilds and will in turn import their dependencies (e.g.@vue/runtime-coreimports@vue/reactivity) - This means you can install/import these deps individually without ending up with different instances of these dependencies, but you must make sure they all resolve to the same version.
- Imported dependencies are also
- In-browser template compilation:
vue.runtime.esm-bundler.js(default) is runtime only, and requires all templates to be pre-compiled. This is the default entry for bundlers (viamodulefield inpackage.json) because when using a bundler templates are typically pre-compiled (e.g. in*.vuefiles).vue.esm-bundler.js: includes the runtime compiler. Use this if you are using a bundler but still want runtime template compilation (e.g. in-DOM templates or templates via inline JavaScript strings). You will need to configure your bundler to aliasvueto this file.
- For use with bundlers like
Bundler Build Feature Flags
Detailed Reference on vuejs.org
esm-bundler builds of Vue expose global feature flags that can be overwritten at compile time:
__VUE_OPTIONS_API__- Default:
true - Enable / disable Options API support
- Default:
__VUE_PROD_DEVTOOLS__- Default:
false - Enable / disable devtools support in production
- Default:
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__- Default:
false - Enable / disable detailed warnings for hydration mismatches in production
- Default:
The build will work without configuring these flags, however it is strongly recommended to properly configure them in order to get proper tree-shaking in the final bundle.
For Server-Side Rendering
vue.cjs(.prod).js:- For use in Node.js server-side rendering via
require(). - If you bundle your app with webpack with
target: 'node'and properly externalizevue, this is the build that will be loaded. - The dev/prod files are pre-built, but the appropriate file is automatically required based on
process.env.NODE_ENV.
- For use in Node.js server-side rendering via