Loading Vue via CDN
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:
<script src="https://unpkg.com/vue@2"></script>For Vue 3:
<script src="https://unpkg.com/vue@3"></script>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.
<div id="content"></div>
<script src="https://unpkg.com/vue@2"></script>
<script>
new Vue({
data: () => ({ message: 'Row' }),
template: `
<div>
<h1>{{message}} your boat</h1>
<button v-on:click="message += ' row'">Add</button>
</div>
`
}).$mount('#content');
</script>Below is a live example.
If you include Vue in your JavaScript files using const Vue = require('vue') or import Vue from 'vue', you can still load Vue from a CDN if you define Vue as a Webpack external.
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 better performance 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 reasons why you might choose to bundle Vue with Webpack rather than loading via CDN. The most important reason is single file components: you need 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 you
need to npm install vue for server side rendering or testing in Node, you can use Webpack externals to
exclude Vue from your final Webpack bundle in favor of loading via CDN.
