Ask A Question


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 lang=locale
    = stylesheet_pack_tag "application"
    = javascript_pack_tag "application"

    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:

Join the discussion
Create an account Log in

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

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

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