Topic: mdb-navbar fix for ssr in nuxt

paddek free asked 5 years ago


Expected behavior Navbar should work with SSR

Actual behavior Using Navbar with SSR causing 'window is not defined' error.

Resources (screenshots, code snippets etc.)

Example component:

<template>
    <mdb-navbar position="top" light>
        <mdb-navbar-nav>
            <span>DEMO</span>
        </mdb-navbar-nav>
    </mdb-navbar>
</template>

<script>
    import {mdbNavbarNav, mdbNavbar} from 'mdbvue'

    export default {
        components: {mdbNavbarNav, mdbNavbar}
    };
</script>

This simple component should work with SSR but it causes a 'window is not defined' error on the server side.

I came up with two solutions the first and not prefered one is to simply disable ssr for the component by wrapping <mdb-navbar> in <no-ssr> tag.

The second and prefered solution involves a change of the mdb-navbar component. Simply moving the content from the created() livecycle event to the mounted() livecycle event fixes the problem.


Magdalena Dembna staff answered 5 years ago


Hi, Firstly, thank you for drawing our attention to this problem. We will look into that as soon as possible and do our best to include this change in the future release. Kind regards, Magdalena


paddek free commented 5 years ago

Fixed in newest version. Thank you!



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.2.0
  • Device: PC/Laptop
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: Yes
  • Provided link: No