Add VueJS Through a CDN

If you wish to use a CDN to add VueJS to your site, you may wish to use the CDN. The simplest way to do this is to add the following to your site:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

However, for production use, it is good to use a specific version (as the docs recommend).

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

Subresource Integrity Check

I would actually take this a step further, and implement subresource integrity checking. This allows you to be sure that the site will not run the library if it has changed from the version you were developing and testing against (a supply chain attack).

Get the hash of the resource (script) by running the following command chain (change SOURCE if there is a new/different version you wish to use).

SOURCE="/tmp/vuejs https://cdn.jsdelivr.net/npm/vue@2.6.14" \
  && wget --quiet -O $SOURCE \
  &&  cat /tmp/vuejs | openssl dgst -sha384 -binary | openssl base64 -A \
  && echo "" \
  && rm /tmp/vuejs

That should get you the following output hash:

ULpZhk1pvhc/UK5ktA9kwb2guy9ovNSTyxPNHANnA35YjBQgdwI+AhLkixDvdlw4

Then plug that into the script tag like so:

<script 
  src="https://cdn.jsdelivr.net/npm/vue@2.6.14"
  integrity="sha384-ULpZhk1pvhc/UK5ktA9kwb2guy9ovNSTyxPNHANnA35YjBQgdwI+AhLkixDvdlw4"
  crossorigin="anonymous"
>
</script>

If you enter the wrong hash, then you will se errors in the console like so (assuming Firefox):

None of the "sha384" hashes in the integrity attribute match the content of the subresource.

Testing

You can quickly test that this is working by implementing the "Hello world" app. E.g. add the following to the body of your page:

<div id="app">
  {{ message }}
</div>

<script type="text/javascript">
var vueConfig = {
  el: '#app',
    data: {
    message: 'Hello Vue!'
  }
};
var app = new Vue(vueConfig);
</script>

You should see Hello Vue! if it's working, and {{ message }} if it failed to fetch the library and validate against the hash.