How to use vue loader in a project?

Question

Vue.js

There is a small vue project on codesandbox where I am trying to use vue-spinner .
Main page Home.vue with links to other pages\components:

<router-link to="/">Home</router-link>
 <router-link to="/helloworld">Hello World</router-link>
 <router-link to="/bigimg">Big Img</router-link>

main.js:

import Vue from "vue";
import App from "./App";

import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

router.beforeEach((to, from, next) => {
  //loading = true;
  next();
});

I would like to load the site (main page) as on the site fishtripr.com (vue).
Question: How to use this loader to load a site (vue project) and display it for a couple of seconds when switching between pages (components) of the project?

Answer 1

How to use this loader to load a site

It is when loading - no way. This is a component, you can see it only after the App is mounted. You can create the illusion that, like here, the page is loading here, there is nothing but a loader, and after a certain period of time we show the content, like everything has loaded.
BeforeEach / afterEach navigation hooks - change the loading value in them.
Sounds like what you were aiming for?