Installation Guide for Vue.js

As with other frameworks, for all the many good things they can be used for, we must first install them or have a way to link to their online location, this article will guide you through the process of installing Vue.JS.

Compatibility Note

Due to the fact that Vue uses ES5 (ECMAScript 5) features which do not work well with IE8 and below, Vue does not support IE8. However, you can run Vue on any browser that is ES5 complaint.

The stable version of Vue as at the time of this writing is version 2.6.10

Vue Devtools

When programming in JavaScript you will quickly run into troubles if you don't make the console your friend for debugging, likewise when working with Vue, it is recommended that we install the Vue Devtools. This enables us to effectively monitor and debug our applications. Much more than the normal console debugging will.

Vue provides three ways for installation namely:

• direct <script> include
• npm
• Vue cli

direct <script> include

To install Vue using this method all you need to do is to provide a script tag with src attribute point to a location for Vue.

There are basically two forms of this script, which are the development and production ready scripts.

When learning you could use the latest or development version like so:

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

However, when you are building a production application please link to a specific version number like so:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Or you could use ES Modules syntax in the case where you are using native ES Modules, this is as shown below:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>

Vue is equally available on unpkg and cdnjs.

NPM

When building large applications with Vue, it is always recommended we use NPM, this is because it works well with Webpack and Browserify which are very efficient module bundlers. To get Vue using NPM just run the line below on your command line:

$ npm install vue

CLI

To get up and running on a single page application, you can use Vue's official CLI. This will provide you will build setups adequate for a modern frontend workflow.

To use Vue CLI run these instructions on the Command Line

npm install -g @vue/cli

Create a project:

vue create my-project

Explanation of Different Builds

Runtime+ Compiler vs Runtime-only

We use the compiler when we need to compile templates on the client. For instance, you will need a compiler when you wish to mount an element using the elements in-DOM HTML as the template.

// this requires the compiler
```new Vue({
  template: '<span>{{ hi }}</span>'
})```

// the compiler is not required here
```new Vue({
  render (h) {
    return h('span', this.hi)
  }
})

Whenever we are using vue-loader or vuetify, the *.vue files conatins templates that will be pre-compiled as JavaScript at build time.

Thus because runtime-only is more light-weight compared to full-build, it is recommended that you use it whenever possible.

However, should you prefer the full build instead, then you must configure an alias for the bundler:

Development vs Production Mode

Usually the un-minified form of vue is for development, whereas the minified form is for production app. CommonJS and ES modules however do not come in minified versions, you have to minify these by yourself.

commons and ES Module builds helps us to preserve the raw checks for the process.env.NODE_ENV to determine the appropriate mode in which they should run. Always use the appropriate bundler configuration to replace environment variables so as to control the mode Vue should run.

When we replace process.env.NODE_ENV with string literals will allow minifiers like UglifyJS to completely drop code blocks that are development-only.

Webpack

With webpack 4+, the mode option can be used:

module.exports = {
  mode: 'production'
}

Whereas, in lower version we will need to use DefinePlugin

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

This is achieved using rollup-plugin-replace

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

Simply apply envify transform to your bundle

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

CSP environment

There are environments like google chrome which enforce Content Security Policy(CSP), this prevents the use of new Function () as expression evaluator. Because the full build depends on new Function it cannot be used in such environments. However, runtime only builds are CSP-compliant.

Dev Build

You can use Vue from the its latest source code on GitHub:

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Vue can also be installed using Bower, using the bower install command as shown below

$ bower install vue

AMD Module Loaders

You can use all U

Next: Vue.js Introduction and Basics.