Skip to content

Instantly share code, notes, and snippets.

@anselal

anselal/vuejs_nprogress_cdn.html

Last active April 7, 2021 12:23
Show Gist options
  • Save anselal/254329c09719c3817459346d5ca3db78 to your computer and use it in GitHub Desktop.
Save anselal/254329c09719c3817459346d5ca3db78 to your computer and use it in GitHub Desktop.
Download ZIP
Add a progress bar (nprogress) in a Vue.js application. Progress bar will load with router links and axios requests
Raw
vuejs_nprogress_cdn.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.1.3/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet" />
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active in <2.1.8 */
{
opacity: 0
}
</style>
</head>
<body>
<div id="app"></div>
<template id="root-template">
<div>
<nav>
<router-link to="/" exact>Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/breeds">Breeds</router-link>
<router-link to="/contact">Contact</router-link>
</nav>
<transition name="fade" mode="out-in">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
</div>
</template>
<template id="home-template">
<div>
<h1>Home Page</h1>
<router-view></router-view>
</div>
</template>
<template id="about-template">
<div>
<h1>About Page</h1>
</div>
</template>
<template id="contact-template">
<div>
<h1>Contact Page</h1>
</div>
</template>
<template id="breeds-template">
<div>
<h1>Breeds Page</h1>
<button @click="get_breeds">Get Breeds with axios</button>
<template v-if="local_breeds">
<ul>
<li v-for="(value, key) in local_breeds" :key="key">
{{ key }} - {{ value }}
</li>
</ul>
</template>
<template v-else>
<h2>No breeds retrieved yet</h2>
</template>
<div>
<h2 v-if="name">Name: {{ name }}</h2>
<h2 v-else>No name variable defined</h2>
</div>
</div>
</template>
<template id="not-found-template">
<div>
<h1>404 Not Found</h1>
</div>
</template>
</body>
<script>
const HomePage = {
name: 'HomePage',
template: '#home-template',
}
const AboutPage = {
name: 'AboutPage',
template: '#about-template'
}
const BreedsPage = {
name: 'BreedsPage',
template: '#breeds-template',
data() {
return {
local_breeds: null,
name: "Anastasios Selalmazidis"
}
},
methods: {
get_breeds() {
axios.get('https://dog.ceo/api/breeds/list/all')
.then(response =>
this.local_breeds = response.data.message,
console.log(this.local_breeds)
);
}
},
}
const ContactPage = {
name: 'ContactPage',
template: '#contact-template'
}
const NotFoundPage = {
name: 'NotFoundPage',
template: '#not-found-template'
}
const routes = [
{
path: '/', component: HomePage, children: [
{ path: '/about', component: AboutPage },
{ path: '/breeds', component: BreedsPage },
{ path: '/contact', component: ContactPage },
],
// path: '*', component: NotFoundPage
}
]
const router = new VueRouter({
base: '/_tmp/vue_nprogress.html', // codepen specific base
// mode: 'history',
routes
})
router.beforeResolve((to, from, next) => {
if (to.path) {
NProgress.start()
}
next()
});
router.afterEach(() => {
NProgress.done()
});
axios.interceptors.request.use(function (config) {
// Do something before request is sent
NProgress.start();
return config;
}, function (error) {
// Do something with request error
console.log(error);
return Promise.reject(error);
});
// Add a response interceptor
axios.interceptors.response.use(function (response) {
NProgress.done();
return response;
}, function (error) {
// Do something with response error
console.log(error);
return Promise.reject(error);
});
Vue.config.devtools = true;
new Vue({
router,
template: '#root-template',
data: function () {
return {
breeds: null
}
},
methods: {
ax() {
axios.get('https://dog.ceo/api/breeds/list/all')
.then(function (response) {
this.breeds = response.data;
console.log(this.breeds);
});
}
},
created() {
setTimeout(() => {
this.ax();
}, 2000);
}
}).$mount('#app')
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment