Create Single Page Application Using VueJS
Creating Single Page application using VueJs is very simple. Because development of single page application using VueJs is done either conventional way or using VueJS Cli. In this tutorial we are going to see how to develop single application in conventional way. Because we all had a habit of developing application in conventional way that’s including JS file in the head of html file and starting the development.
So going from conventional way to VueJs CLi way (webpack build system) of development approach is help everyone understand easily. Let’s follow this tutorial step by step to create single page application using VueJS 2.
Step 1: Include VueJS and VueRouter
First create spa-vuejs directory/folder in your htdocs/www folder, then next add index.html file in it. Here is the skeleton of my HTML5 document. So copy & paste the following html markup in your index.html file you have created.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Single Page VueJS Application</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
</body>
</html>
In the above html snippet I have included the VueJS and VueRouter js files in the head of html file to start single page vuejs application development.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
Step 2: Initialize VueJS Application
Now create VueJs application container i.e. <div id=”id”></div> . These is where we will mount our VueJs application. Add below html markup in the <body> of the index.html file.
<div id="app" >
<h1 class="center">{{msg}}</h1>
</div>
Next initialize VueJs object to create VueJs application, and pass required parameters as an object. Where we specify VueJs application container as el property and the data we want to show in the html we specify as data property like this.
<script>
var app = new Vue({
el: "#app",
data:{
msg: "Hello World"
}
});
</script>
Now we have successfully created our hello world VueJs application.
Step 3: Create VueJS Local Component
Now we are going to create three VueJS local component for three pages we going to create. Let create VueJS local component. Here is the skeleton of VueJS component.
<script>
var nameOfComponent = {
template: '<h1> Your html goes here.</h1>'
};
</script>
Here is my three VueJs component for Home, Contact & About pages.
<script>
//home components
var home = {
template: `<div>
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel exercitationem temporibus quos, eaque officia modi, tempore
ratione nisi eos harum esse omnis repudiandae iusto? In facere mollitia vero voluptatem odit.
</p>
</div>`
}
//contact components
var contact = {
template: `<div>
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel exercitationem temporibus quos, eaque officia modi, tempore
ratione nisi eos harum esse omnis repudiandae iusto? In facere mollitia vero voluptatem odit.
</p>
</div>`
}
//contact components
var about = {
template: `<div>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel exercitationem temporibus quos, eaque officia modi, tempore
ratione nisi eos harum esse omnis repudiandae iusto? In facere mollitia vero voluptatem odit.
</p>
</div>`
}
</script>
Step 4: Initialize VueJs Router
Finally we are going to create our single application routing using vue-router. So initialize vue-router pass options as object.
var router = new VueRouter({
routes:[
{ path: '/', component: home },
{ path: '/contact', component: contact },
{ path: '/about', component: about }
]
});
Where
path – indicates url of the page.
component- tells which component will render when we visit particular path.
Next we are going to inform VueJS application i.e. we are going to use vue-router in our application. So we need to add router property in VueJs instance we created earlier and assign value as vue-router instance we have created.
var app = new Vue({
el: "#app",
router: router
});
Step 4: Add VueRouter Navigation Link
Finally add vue-router link to navigate to different pages we use <router-link> directive which intern generates <a> tag.
<ul class="nav">
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<router-link to="/contact">Contact</router-link>
</li>
<li>
<router-link to="/about">About</router-link>
</li>
</ul>
Next using <router-view></router-view> directive we specify where we want vue-router to render the specified compnent.
<router-view></router-view>
Here is the final our vuejs single page application script snippet.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app" >
<ul class="nav">
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<router-link to="/contact">Contact</router-link>
</li>
<li>
<router-link to="/about">About</router-link>
</li>
</ul>
<div class="clearfix"></div>
<div id="content">
<router-view></router-view>
</div>
</div>
<script>
//home components
var home = {
template: `<div>
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel exercitationem temporibus quos, eaque officia modi, tempore
ratione nisi eos harum esse omnis repudiandae iusto? In facere mollitia vero voluptatem odit.
</p>
</div>`
}
//contact components
var contact = {
template: `<div>
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel exercitationem temporibus quos, eaque officia modi, tempore
ratione nisi eos harum esse omnis repudiandae iusto? In facere mollitia vero voluptatem odit.
</p>
</div>`
}
//contact components
var about = {
template: `<div>
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vel exercitationem temporibus quos, eaque officia modi, tempore
ratione nisi eos harum esse omnis repudiandae iusto? In facere mollitia vero voluptatem odit.
</p>
</div>`
}
//Routes
const router = new VueRouter({
routes:[
{ path: '/', component: home },
{ path: '/contact', component: contact },
{ path: '/about', component: about }
]
})
var app = new Vue({
el: "#app",
router: router
});
</script>
Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts
If you want any of my script need to be customized according to your business requirement,
Please feel free to contact me [at] muni2explore[at]gmail.com
Note: But it will be charged based on your customization requirement
