Creating Bulma.io Spark theme. Blade rendering before vue.js2 components / css is ready.

Hi all,

I am trying to create my own bulma.io theme for Laravel Spark.

In short I have:

updated 'webpack.mix.js' to compile sass as opposed to less, swapping out 'resources/assets/less/app.less' for 'resources/assets/sass/app.scss'. In app.scss I import bulma, buefy and some other bulma extensions
been creating my own .vue components in 'resources/assets/js'
been modifying the blade.php files within 'resources/views/vendor/spark', swapping out Bootstrap 3 for my own Bulma components & Bulma CSS.

My issue:

Updating everything for my own Bulma .vue components has been going well. But when I refresh the page the blade template (for example resources/views/vendor/spark/nav/user.blade.php) renders in the browser before everything has finished loading. See two screens below:

Screen 1: During loading

Screen 2: Loaded

My thoughts are it could be something to do with my webpack config (app.js is large at 2MB) or it could be that the bulma css is for some reason loading after the html. Either way I've been stuck on this for a while! Any thoughts appreciated.

Luke

lukio_3

8 years ago

Best Answer

Level 1

I found it. I'll leave the answer here for anybody else looking!

Taylor was using the v-cloak directive on the root Vuejs2 div

`<div id="spark-app" v-cloak>`

This directive essentially calls some 'cloak' css until the vue instance has finished rendering. In overwriting the default bootstrap 3 theme (in /public/app.css) with Bulma.io I accidentally removed the v-cloak css:

[v-cloak] {
  display: none;
}

I put this back into my public/app.css and voila!

Thanks

Luke

3 likes

Cronix

8 years ago

Level 67

Thanks for coming back and posting your solution to help others instead of just marking it solved.

2 likes

midnightcipher

7 years ago

Level 6

Cheers man you just helped me figure my bug out!

Please or to participate in this conversation.