Using CDN in Vue.js

CDN is a Content Delivery Network. It is the easiest way to install Vue by including Vue through CDN in your script tag. Instead of installing Vue in your local server it will be delivered from a separate server. Vue.js is a progressive framework as we know. Vue.js CDN is delivered as shown below.

<!-- development version, includes helpful console warnings -->

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

<!-- production version, optimized for size and speed -->

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


We will see how to install the view using npm. Using module bundlers like webpack, parcel or rollup.js you can directly include the package into the project. 


# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

Register BootstrapVue in the app’s entry point.

// app.js

import Vue from 'vue'

import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

Then import Bootstrap and BootstrapVue css files.

// app.js

import 'bootstrap/dist/css/bootstrap.css'

import 'bootstrap-vue/dist/bootstrap-vue.css'
Let’s see how vue.js Bootstrap CDN is used without module bundler or compile process. Bootstrap and BootstrapVue CSS urls are added to the HTML section and JavaScript files are required using cdn.


<!-- Add this to <head> -->


<!-- Load required Bootstrap and BootstrapVue CSS -->

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />


<!-- Load polyfills to support older browsers -->

<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>


<!-- Load Vue followed by BootstrapVue -->

<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>

<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>


Now lets see how to use CDN in vue cli.

First step is to update your public/index.html adding the vue script for the cdn.


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


Then create a vue.config.js file in the root with the configurations given below. If you already have the file add the configureWebpack block to it.

module.exports = {
  configureWebpack: {
    externals: {
      Vue: "vue"
    }
  }
};