Adding VueJS to Your Web Pages

There are many ways to add VueJS to your web pages. In this chapter we review most of them, but remember you only need one. If it's confusing for you, I recommend sticking to the first method on the list.

  • Include VueJS from a CDN (Content Delivery Network) - easiest way
  • Download VueJS manually and add the .js file to your page.
  • Use NPM(Node Package Manager) to install and add it to your project’s dependancies. - recommended for large applications
I’ve created an  online Vue Playground on JSFiddle. It is perfect for testing purposes. Feel free to use it for practicing.


If you don't want to download and host VueJS yourself, you can include it from a CDN (Content Delivery Network).Just place below code before your closing </body> tag:

<script src=""></script>

Notice we did not have to enter an exact version. That's because it's pointing to the latest release.

Download VueJS manually

You may download the .js file containing VueJS and host it on your own server. There are two versions of the library:

It is highly recommended to use the minified (.min) version for production only. This is because the development version (not minified) contains full warnings and debug mode which are extremely helpful while developing your Vue application. 

After hosting the .js file on your server, simply include it with a script tag and place it before your closing </body> tag. Vue will be registered as a global variable.

<script src="/path-to-assets/js/vue.js"></script>


NPM is the recommended installation method for large JavaScript applications. In case you're creating a SPA I highly suggest going with the NPM installation:

npm install vue --save 

And the set it on the window object so we can start using it in our project:

window.Vue = require('vue');