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:.
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.