All threads / Navbar with Vue.js and webpacker - Flickering at page load πŸ˜’

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Navbar with Vue.js and webpacker - Flickering at page load πŸ˜’

Thomas Sohet asked in Javascript β€’

I have a classic RoR - Webpacker app.
On top of Webpacker, we have implemented Vue as our frontend framework and Tailwind as our css framework πŸ‘Œ

Everything is functioning fine. Yet I am not quite happy with the navbar behaviour at page load.

The implementation is the following:
The layout.html file:

doctype html
html.no-js lang=locale
  head
    = stylesheet_pack_tag "application"
    = javascript_pack_tag "application"

  body
    div data-behavior='vue'
      = sw-navigation
      == yield

The application.js file:

import { Navigation } from '../components/layout'
Vue.component('sw-navigation', Navigation)

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '[data-behavior="vue"]'
  })
})

The sw-navigation is a straightforward vue component.

The issue is that at loading, my navbar has a weird behaviour that's making it look ugly:
The JS not being interpreted display yet, the element of the navbar appears on the right the screen without any style.

You can see the result in my screenshot here

How can I solve this ?

  • I know I can investigate in server-side rendering. But TBH I'd like to avoid that option just for a navbar component
  • I know I can use a plain old html navbar, no vue component. Yet this is exactly the perfect use case for a component in my opinion (needs JS for scrolling behaviour - content changes based on variables - ...)
  • What else ?

Please help, I am sure I am not the only one struggling with this πŸ˜‰

Status update: [SOLVED]


Thanks to a live code of Adam Wathan himself, I found out that [v-cloak] was the solution I was looking for.

Here is the solution:
πŸ‘‰ https://www.youtube.com/watch?v=XUXpcbYQ_iQ&feature=youtu.be&t=2357

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 35,699+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.