Vue-router page loading effect

vue-router and css

This tutorial will help you create a loading effect to integrate to your SPA, while using vue-router. When managing your routes between your components (using .vue files), you will notice that each call to the API has to finish, so Vue can render the results. This might take time especially if you have a lot of stuff going on. You can use vue-router's transitions in order to create a loader to show, using CSS, so your page doesn't look empty or blank while it loads.

It is possible then to create a content-loader vue component that you can reuse as you see fit.

Read this tutorial here, made by Jilson Thomas.