You can load Vue from a CDN using a script tag.For example, here's how you can load the latest version of Vue 2.x:.
More Vue Tutorials
Once you load Vue via CDN, Vue will be a global variable that you can use normally.For example, the below is a standalone HTML page that loads Vue 2.x and adds interactivity.
When to Use CDN versus Bundling
There are several advantages to loading Vue via a CDN as opposed to bundling it yourself.For one, the browser can cache Vue separately from your application, which can lead to betterperformance if you update your app frequently but use the same version of Vue.
For another,your build step will be faster. However, the Vue docs recommend using bundling rather than loading from a CDN for "building large scale applications with Vue".
Here's a few reasonswhy you might choose to bundle Vue with Webpack rather than loading via CDN. The mostimportant reason is single file components: youneed to include Vue in your build step to get SFC support.
However, if you don't need SFC support, you can probably get away with using a CDN. Even if youneed to npm install vue for server side rendering or testing in Node, you can use Webpack externals toexclude Vue from your final Webpack bundle in favor of loading via CDN.
Vue School has some of our favorite Vue video courses.
For prototyping or learning purposes, you can use the latest version with:
For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions:
If you are using native ES Modules, there is also an ES Modules compatible build:
You can browse the source of the NPM package at cdn.jsdelivr.net/npm/vue.
Vue is also available on unpkg and cdnjs (cdnjs takes some time to sync so the latest release may not be available yet).
Make sure to read about the different builds of Vue and use the production
version in your published site, replacing
vue.min.js. This is a smaller build optimized for speed instead of development experience.
NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack or Browserify. Vue also provides accompanying tools for authoring Single File Components.
Vue provides an official CLI for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See the Vue CLI docs for more details.
The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through the guide without any build tools before using the CLI.
Explanation of Different Builds
dist/ directory of the NPM package you will find many different builds of Vue.js. Here’s an overview of the difference between them:
|UMD||CommonJS||ES Module (for bundlers)||ES Module (for browsers)|
Full: builds that contain both the compiler and the runtime.
Runtime: code that is responsible for creating Vue instances, rendering and patching virtual DOM, etc. Basically everything minus the compiler.
UMD: UMD builds can be used directly in the browser via a
tag. The default file from jsDelivr CDN at https://firstname.lastname@example.org is the Runtime + Compiler UMD build (
CommonJS: CommonJS builds are intended for use with older bundlers like browserify or webpack 1. The default file for these bundlers (
pkg.main) is the Runtime only CommonJS build (
ES Module: starting in 2.6 Vue provides two ES Modules (ESM) builds:
ESM for bundlers: intended for use with modern bundlers like webpack 2 or Rollup. ESM format is designed to be statically analyzable so the bundlers can take advantage of that to perform “tree-shaking” and eliminate unused code from your final bundle. The default file for these bundlers (
pkg.module) is the Runtime only ES Module build (
ESM for browsers (2.6+ only): intended for direct imports in modern browsers via
Runtime + Compiler vs. Runtime-only
If you need to compile templates on the client (e.g. passing a string to the
template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:
vueify, templates inside
Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can. If you still wish to use the full build instead, you need to configure an alias in your bundler:
Add to your project’s
Add to your project’s
Development vs. Production Mode
Development/production modes are hard-coded for the UMD builds: the un-minified files are for development, and the minified files are for production.
CommonJS and ES Module builds are intended for bundlers, therefore we don’t provide minified versions for them. You will be responsible for minifying the final bundle yourself.
CommonJS and ES Module builds also preserve raw checks for
process.env.NODE_ENV to determine the mode they should run in. You should use appropriate bundler configurations to replace these environment variables in order to control which mode Vue will run in. Replacing
process.env.NODE_ENV with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, reducing final file size.
In Webpack 4+, you can use the
But in Webpack 3 and earlier, you’ll need to use DefinePlugin:
Apply a global envify transform to your bundle.
Also see Production Deployment Tips.
Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of
new Function() for evaluating expressions. The full build depends on this feature to compile templates, so is unusable in these environments.
On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into
render functions which work perfectly in CSP environments.
Important: the built files in GitHub’s
/dist folder are only checked-in during releases. To use Vue from the latest source code on GitHub, you will have to build it yourself!
Only UMD builds are available from Bower.
AMD Module Loaders
All UMD builds can be used directly as an AMD module.