All threads / How do I have a Vue.js navbar stay on the page between page navigations?
Ask A Question

Notifications

You’re not receiving notifications from this thread.

How do I have a Vue.js navbar stay on the page between page navigations?

James Devereux asked in Gems / Libraries

I built a lovely Navbar in Tailwind CSS in my rails app following a tutorial by Adam Wathan which uses Vue.js for the javascript behavior on dropdowns.

I added Vue.js the way Chris suggests here, by mounting it in a div with data-behavior which wraps the entire app: https://gorails.com/episodes/vuejs-components-in-rails-views?autoplay=1

I also added the Turbolinks Adapter for the setup as he recommends.

It's all working as expected but the problem with loading everything after turbolinks:load is that the navbar pops off the page when you navigate to another page. How can I solve this? I tried initialising the Vue component after different events but everything just leads to all my vue components breaking and disappearing off the page.

Join the discussion

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

Join 66,029+ 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.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.