Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Navbar toggler animation with Nuxt causing bug

GuillaumeDgr premium asked 3 years ago


Expected behavior Put navbar toggler animation in my website (using nuxt / on mobile).

Actual behavior Navbar toggler animation with Nuxt causing bug when navigating : "TypeError: can't access property "classList", this.$refs.animatedIcon is undefined"

Resources (screenshots, code snippets etc.)

 <mdb-navbar
    animation="1"
    transparent
    class="z-depth-0"
    container
    color="secondary"
    dark
    position="top"
    scrolling
  ></mdb-navbar>

enter image description here


Mikołaj Smoleński staff commented 3 years ago

Are you able to recreate this issue in our snippets creator? https://mdbootstrap.com/snippets/

Keep coding, Mikołaj from MDB


GuillaumeDgr premium commented 3 years ago

What do you mean ? Thanks


Mikołaj Smoleński staff commented 3 years ago

We'll try to fix it with the next release (26.07).

Keep coding,  Mikołaj from MDB


Mikołaj Smoleński staff commented 3 years ago

Hi there again,

Unfortunately Navbar component will not work properly in Nuxt with SSR as its state depends on the browser window object, which is undefined on the server-side.

To fix the issue, please disable ssr: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-ssr

Keep coding, Mikołaj from MDB


GuillaumeDgr premium commented 3 years ago

Unfortunately, tests are not good, bug still here... :/ thks


GuillaumeDgr premium commented 2 years ago

Any update on this ? Adding no-ssr tag to navbar does not change anything. Thanks


Bartosz Cylwik staff commented 2 years ago

Hello! We checked that navbar in nuxt and we do not see the issue at mdbvue version 6.7.2 and nuxt version 2.0.0 after wrapping it between no-ssr tag. Could you provide us your nuxt and MDB version?

Bartosz.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB4 6.7.2
  • Device: Mac book pro
  • Browser: Firefox developers
  • OS: MacOs
  • Provided sample code: No
  • Provided link: No