Topic: Integration with Laravel 8 Jetstream - Inertia using modules
spidey priority asked 3 years ago
Expected behavior Navbar or any other modules/components to work within Laravel + InertiaJs (Vue)
Actual behavior I am using a fresh Laravel 8 Jetstream on Inertia mode (VueJs templates) and I want to integrate MDB by importing only necessary modules. In order to do this, I am just importing a single module that should work out of the box.
Resources (screenshots, code snippets etc.)
AppLayout.vue
<template>
<header>
<!-- Animated navbar-->
<nav class="navbar navbar-expand-lg fixed-top navbar-scroll">
...
</nav>
</header>
...
</template>
<script>
...
import { Navbar } from 'mdb/mdb.pro';
</script>
The compilation is successfull.
Basically, this module looks for an element with class '.navbar-scroll' which exists in my AppLayout.vue template as can be seen, but looks like the element is not found by Navbar module to execute the animation on scroll.
Just for test, I tried to dump inside the 'navbar.js' file that is responsible for doing this, to check if the element/class exists right before trying to execute it's code, but it returns undefined:
mdb/pro/navbar.js line 70
...
let nav = document.querySelector('.navbar-scroll');
console.log(nav); // returns undefined
SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => {
console.log(element); // since there is no found element, this code is not executed
new Navbar(element).init();
});
That means the template DOM is rendered after the module (Navbar) execution so of course the module won't find my '.navbar-scroll' element/class. Or in other words, the Navbar module gets executed too early ?
So how can I deal with this ? Most probably this issue may be available for other scenarios as well, since I'm trying to use some elements from the DOM, but it's not rendered yet.
Arkadiusz Idzikowski staff answered 3 years ago
The best solution for dynamically loaded components is to re-initialize them manually when the DOM is loaded. For example, you can try to init the navbar class in the mounted
method:
mounted() {
new Navbar(element).init();
},
spidey priority commented 3 years ago
You're right. it works in this way. So should I do this for all components/modules? Do they all have an 'init()' method to call on mounted ?
Mikołaj Smoleński staff commented 3 years ago
For this moment, manual initialization it's the only way to work with Vue and MDB UI KIT (plain JS). We're going to prepare a brand new package written in Vue.js soon. Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: 2.2.1
- Device: PC
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No