anselal/vuejs_nprogress_cdn.html

## 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>
	<!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>