Vuelidate is one of the most popular validation packages. It is widely used by various developers across the world and even though there are many other alternatives out there, the library remains one of the leaders. As the library is so popular, there are many use cases that a developer might need. One of these use case is loading the Vuelidate from CDN. As the usage of content delivery network is very popular (and it has many reasons for it), it became a habit for many of use to use it for any needs. Let’s see if the Vuelidate CDN is a possible choice.
What are the advantages of using the content delivery network?
Content delivery network has many advantages. Especially if you Vue project uses many of the additional packages. These are the most valid reasons for using CDN for your Vue project:
- Lower bandwidth. This depends on the hosting plan (if you are using shared hosting this might not be the problem), but you might be paying for the bandwidth. What does it mean in case you are loading each of the Vue.js packages from your own servers, is that you are paying for each of the operations. Computational power used might not be that huge, but if you have many user sessions daily, it adds up.
- Loading speed. If the package is delivered from your server, the server performance will definitely suffer. Of course, this is not a significant loss of speed. However, loading all the dependencies from CDN means that it will be delivered from various servers. If your user is from US, US based server will be used. If he is from Russia, server in Russia will serve it the dependency,
- Security. If set correctly (with the integrity check), loading Vue packages, such as Vuelidate, from CDN, is more secure.
Can the application be delivered from CDN? Is there such a thing as Vuelidate CDN?
Vuelidate is not that type of library, such let’s say, a Bootstrap, so it isn’t typically included from CDN. Well, at least there is no official tutorial about this in the official documentation.
Usually, this package will be used in the Vue component, this means that in this case there is no necessary to have the Vuelidate from CDN. As it is a casual npm package, it can be added by running a command:
npm install vuelidate –save
After this, it might be simply imported and used by the application:
import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)This is how you can get the Vuelidate CDN
Even though the creators described only a way to install the package, there are websites such as jsdeilvr.com, that provides CDN for Vuelidate. Visit the https://www.jsdelivr.com/package/npm/vuelidate, choose the version you want to use (by default it will be set as the newest version), and click on the icon next to the index.min.js file.
You can choose if you want to copy the HTML or URL of the package. If you want to include this directly into your HTML document, just click the Copy HTML and you will have script element with source:
<script src="https://cdn jsdelivr.net/npm/vuelidate@0.7.6/lib/index.min.js"></script>Another way of how you can have the Vuelidate CDN, is to include it from the installed package. This is how it looks like:
<script src="vuelidate/dist/vuelidate.min.js"></script>
<!-- The builtin validators is added by adding the following line. -->
<script src="vuelidate/dist/validators.min.js"></script>However, make sure that you had installed the npm package previously.
That’s it, if you want to check how you can use the Vuelidate, check this article.