Vue Js Cdn Example

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.

AMD Module Loaders

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. Open the project via a browser and see the output like this:.

You can see the project file structure and download the project from GitHub. We have successfully created Vue routes using CDN. In this article, you are going to learn about how to install Vue by using CDN. Vue is a lightweight front-end JavaScript framework that is widely used for building Single Page Applications.

To work with Vue, you can install it in many ways, Using CDN(Content Delivery Network) is one of them. You need to use a script tag to load Vue from a CDN. You can find the CDN script tag for Vue from VueJs official site or unpkg or cdnjs.

If you want to work with the latest version of Vue, it is always recommended to use form Vuejs official site. There are two versions available one is for development and another one is for production.

Bower