Md. Obydullah Howdy, I am Md. Obydullah from Bangladesh. I love to write the article which will help others. It's my passion.

Vue.js Routing From Scratch Using CDN Without CLI

Published on May 8, 2019 2 min read

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.

Table of Contents

  1. Configure Development Server
  2. CDN URLs
  3. Create Vue Templates
  4. Create Vue Instance and Define Routes
  5. The Final HTML File
  6. Run and See the Output

Step 1 : Configure Development Server

At localhost, we use Apache a server. In the root directory of our project we have to create a .htaccess file and need to paste this code:

.htaccess
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

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

Step 2 : CDN URLs

We need two JS CDN. One is vue and another is vue-router. Let’s the CDN URLs:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router"></script>

Step 3 : Create Vue Templates

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:

home.vue.js
var Home = {
	template: "<div><h1>Home</h1><p>This is home page</p></div>"
};
about.vue.js
var About = { 
	template: "<div><h1>About</h1><p>This is about page</p></div>"
};
contact.vue.js
var Contact = { 
	template: "<div><h1>Contact</h1><p>This is contact page</p></div>"
};

Step 4 : Create Vue Instance and Define Routes

At this step, we are going to create a Vue object and define the routes. Take a look at the code:

Main Script
<script>
var routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

var router = new VueRouter({
  routes: routes,
  mode: 'history',
  base: '/'
});

var app = new Vue({
	el: '#app',
  	router: router
})
</script>

Step 5 : The Final HTML File

In this file, we have to include the CDN, vue pages and need to define the #app element div. Let’s do this:

index.html
<!DOCTYPE html>
<html>
<head>
	<title>Vue.js Routing From Scratch Using Vue Router CDN</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script src="https://unpkg.com/vue-router"></script>
</head>
<body>

<div id="app" class="container" style="margin-top: 50px;">

	<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
	  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
	    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
			<li> <router-link class="nav-link" to="/"> Home </router-link> </li>
			<li> <router-link class="nav-link" to="about"> About </router-link> </li>
			<li> <router-link class="nav-link" to="contact"> Contact </router-link> </li>
	    </ul>
	  </div>
	</nav>

	<div class="text-center" style="margin-top: 20px;">
		<router-view></router-view>
	</div>
</div>

<!-- Vue Pages -->
<script src="pages/home.vue.js"></script>
<script src="pages/about.vue.js"></script>
<script src="pages/contact.vue.js"></script>

<!-- Vue Instance and Routes -->
<script>
var routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

var router = new VueRouter({
  routes: routes,
  mode: 'history',
  base: '/'
});

var app = new Vue({
	el: '#app',
  	router: router
})
</script>

</body>
</html>

Step 6 : Run and See the Output

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

Md. Obydullah Howdy, I am Md. Obydullah from Bangladesh. I love to write the article which will help others. It's my passion.

Leave a Reply

Your email address will not be published. Required fields are marked *