Vue Router Cdn

Posted on  by admin
Today I am going to share how to route in Vue.js using CDN only.

We won’t use CLI, Webpack, etc. We are going to see the very simple routing. For the big project, we have to use Vue Router using CLI. In localhost, normally we use Apache as a server.

In the root directory of our project we have to create a .htaccess file and need to paste this code:.

For Nginx and other servers, please take a look at this page: Example Server Configurations.

We need two JS CDN.

One is vue and another is vue-router.

Let’s the CDN URLs:. In the root folder of your project, create a folder named “pages“. In page folder, create three files called home.vue.js, about.vue.js, and contact.vue.js.

Now copy and paste these code:. At this step, we are going to create a Vue object and define the routes.

Take a look at the code:. In this file, we have to include the CDN, vue pages and need to define the #app element div.

Simon HyllSimon Hyll

You can load Vue from a CDN using a script tag.For example, here's how you can load the latest version of Vue 2.x:.

Once you load Vue via CDN, Vue will be a global variable that you can use normally.For example, the below is a standalone HTML page that loads Vue 2.x and adds interactivity.

Below is a live example. If you include Vue in your JavaScript files using const Vue = require('vue') or import Vue from 'vue', you can still load Vue from a CDN if you define Vue as a Webpack external.

There are several advantages to loading Vue via a CDN as opposed to bundling it yourself.For one, the browser can cache Vue separately from your application, which can lead to betterperformance if you update your app frequently but use the same version of Vue.

For another,your build step will be faster.

However, the Vue docs recommend using bundling rather than loading from a CDN for "building large scale applications with Vue".

Here's a few reasonswhy you might choose to bundle Vue with Webpack rather than loading via CDN.

Vue Router One Click Installation