CODEWITHSUNDEEP
cssvue.js
user10943919
user10943919

Reputation:

Problem with css not loading fast enough on vuejs app

On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.

I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.

I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.

I appreciate any solutions here.

(Can't show image/gif here due to reputation rule)

Click here for gif

Upvotes: 2

Views: 2926

Answers (1)

Robb216
Robb216

Reputation: 552

The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed

<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>

// app.js should come first

This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?

Upvotes: 1

Related Questions