Updated April 3, 2023
Introduction to Vue.js Single Page Application(SPA)
Nowadays, Single Page Applications are getting very much common. There are different tools and boilerplates coming with the Frontend Frameworks, which covers the projects, and they are mostly Single Page Applications. Vue.js SPA also is a framework that supports single-page applications. Every time we add features and pages, the SPA becomes bulkier and very complex to manage. The application’s loading time also increases, and even it increases the parsing time of the JavaScript by the browsers. In Vue.js, there are different tricks that can help these scenarios increase performance, which Vue.js a great framework to build single-page applications.
Syntax
import singleSpaVue from 'single-spa-vuejs'
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
el: `#app`,
data () {
return { content: 'heyoo single SPA' }
},
render: h => h('div', this.content)
}
})Working of Vue.js SPA
When we use Vue.js to make Single Page applications, we need to work upon the code’s performance. The complex logic in our Vue.js blocks causes re-rendering of the extra components, which directly affects the performance. So, we need to isolate the areas of our application which is slowing down the entire code.
To enhance the performance, we should also avoid using any animation or transition that is not based on Position or Rotation or Scale or Opacity.
Examples of Vue.js SPA
Different examples are mentioned below:
Example #1 – Basic SPA using Vue.js
In the example below, a basic single-page application is built with links to EduCBA’s website.
The files used to implement the code are below:
[i] EDUCBA.png
[ii] HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Important Links</h2>
<google-ad
id="div-gpt-ad-1500260348414-0"
unit="udn.com/News/SuperBanner"
></google-ad>
<ul>
<li>
<a href="https://www.educba.com/" target="_blank"> Our Website </a>
</li>
<li><a href="https://www.educba.com/tutorials/?source=menu" target="_blank"> Free Tutorials </a></li>
<li>
<a href="https://www.educba.com/courses/?source=menu" target="_blank"> Certification Courses </a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Heyoo! Welcome to EduCBA"
};
}
};
</script>
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 150px;
}
a {
color: #f7fc5d;
}
</style>[iii] App.vue
<template>
<div id="app">
<img width="25%" src="./assets/EDUCBA.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
}
};
</script>
<style>
#app {
font-family: 'Times New Roman'
, Times
, serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #94fa4b;
margin-top: 60px;
background-color: #cc2385;
}
</style>[iv] main.js
import Vue from "vue";
import App from "./App";
import DoubleClick from "vue-doubleclick";
Vue.config.productionTip = false;
let mappings = {
banner: [
{
window: [1001, 150],
sizes: [[969, 89], [1201, 111], [729, 91], [971, 251]]
},
{
window: [0, 0]
, sizes: []
}
]
};
let sizes = {
banner: [[969, 89], [971, 251], [1201, 111], [729, 91]]
};
Vue.use(DoubleClick, {
id: "129853887",
mappings,
sizes
});
new Vue({
el: "#app",
components: { App },
template: "<App/>"
});Output:
Example #2 – Notes Keeper Application using Vue.js SPA
In the example below, we have developed a Single Page Application (SPA), i.e. a Note Keeper Application using Vue.js. Firstly, in this application, one has to enter their name to proceed; if the Name is not entered, the “Enter your name to proceed” text appears. Once the name is entered, and the proceed button is clicked. Then, a To-do list window appears where one can enter their to-do tasks and print that To-do list on the screen. To delete the whole list, one can press the “Delete the List Here” button. And to go back to the Home Page, one can click the “Back Home” link.
The files used to implement the code are below:
[i] EDUCBA.png
[ii] MemoForm.vue
<template>
<div>
<h5>Heyoo! Welcome {{ name }}. :)</h5>
<form @submit.prevent="postMemo">
<label for="memo">To-do List</label>
<div>
<textarea id="memo" cols="30" rows="10" v-model="memo.text"></textarea>
</div>
<span v-if="error.inValid">Invalid Input</span>
<div>
<button type="submit">Submit List</button>
</div>
</form>
<MemoList :items="this.memoList" @delete="deleteMemo"/>
<RouterLink to="/">Back Home</RouterLink>
</div>
</template>
<script>
import MemoList from "./MemoList";
export default {
components: {
MemoList
},
computed: {
name() {
return this.$store.getters["name"];
}
},
data() {
return {
memo: {
id: null,
text: ""
},
error: {
inValid: false
},
memoList: {
memos: []
}
};
},
mounted: function() {
this.$nextTick(function() {
this.memoList.memos = JSON.parse(localStorage.getItem(this.name)) || [];
});
},
methods: {
postMemo() {
if (this.memo.text === "") {
this.error.inValid = true;
return;
} else {
this.error.inValid = false;
}
const text = this.memo.text;
const memosLength = this.memoList.memos.length;
this.memoList.memos.push({
id: memosLength === 0 ? 0 : this.memoList.memos[
memosLength – 1
].id + 1,
text: text
});
this.memo.text = "";
},
deleteMemo(memoId) {
const afterMemos = this.memoList.memos.filter(memo => {
return memo.id !== memoId;
});
this.memoList.memos = afterMemos;
}
},
watch: {
memoList: {
handler(newVal) {
localStorage.setItem(this.name, JSON.stringify(newVal.memos));
},
deep: true
}
}
};
</script>[iii] MemoList.vue
<template>
<div>
<div v-for="item in items.memos" :key="item.id">
<span>{{ item.text }}</span>
<button @click="emitDelete(item.id)">Delete the List Here</button>
</div>
</div>
</template>
<style>
div {
white-space: pre;
}
</style>
<script>
export default {
props: {
items: {
type: Object,
required: false
}
},
methods: {
emitDelete(memoId) {
this.$emit("delete", memoId);
}
}
};
</script>[iv] Top.vue
<template>
<div>
<h2>Notes Keeper</h2>
<form @submit.prevent="login">
<label for="name">Your Name?</label>
<div>
<h1></h1>
<input type="text" id="name" v-model="nameForm.name">
</div>
<span v-if="error.inValid">Enter your name to proceed.</span>
<div>
<h1></h1>
<button type="submit">Proceed</button>
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
nameForm: {
name: ""
},
error: {
inValid: false
}
};
},
methods: {
login() {
if (this.nameForm.name === "") {
this.error.inValid = true;
return;
} else {
this.error.inValid = false;
}
this.$store.dispatch("login", this.nameForm.name);
this.$router.push("/memo");
}
}
};
</script>[v] index.js
import Vue from "vue";
import Vuex from "vuex";
import user from "./user";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user
}
});
export default store;[vi] user.js
const state = {
name: null
};
const getters = {
name: state => (state.name ? state.name : "")
};
const mutations = {
setName(state, name) {
state.name = name;
}
};
const actions = {
login(context, name) {
context.commit("setName", name);
}
};
export default {
state,
getters,
mutations,
actions
};[vii] App.vue
<template>
<main>
<router-view></router-view>
</main>
</template>[viii] main.js
import Vue from "vue";
import router from "./router";
import store from "./store";
import App from "./App.vue";
new Vue({
el: "#app",
router,
store,
components: { App },
template: "<App/>"
});[ix] router.js
import Vue from "vue";
import VueRouter from "vue-router";
import Top from "./components/Top";
import MemoForm from "./components/MemoForm";
import store from "./store";
Vue.use(VueRouter);
const routes = [
{
path: "/",
component: Top
},
{
path: "/memo",
component: MemoForm,
beforeEnter(to, from, next) {
if (store.getters["name"] === "") {
next("/");
} else {
next();
}
}
}
];
const router = new VueRouter({
mode: "history",
routes
});
export default router;Output:
Conclusion
On the basis of the above article, we understood how to make Single Page Applications in Vue.js. We went through the concept of Vue.js SPA and understood how to enhance the performance of our SPA. The examples will help us in understanding the application of the SPA according to different situations.
Recommended Articles
This is a guide to the Vue.js SPA. Here we discuss the introduction, syntax, and Working of Vue.js SPA along with different examples and Output. You may also have a look at the following articles to learn more –
