Vue.js Routing From Scratch Using CDN Without CLI

May 08, 2019
Article · 6 min
1280 words

Like (0)
Favorite (0)

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.

Note: Please follow this updated article Vue.js 3 Routing From Scratch Using CDN Without CLI.

Configure Development Server
CDN URLs
Create Vue Templates
Create Vue Instance and Define Routes
The Final Index File
Run and See the Output

Step 1 : Configure Development Server

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:

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

index.html

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

Vue.js

Md Obydullah

Software Engineer | Ethical Hacker & Cybersecurity...

Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.