Nuxt•12mo ago

Flowbite not working when using nuxtlink

Hi, I am using tailwind with flowbite in my nuxt project. I installed flowbite using the instructions on their site, if I use the traditional way of loading the page everything works as it should. But when I switch the page using nuxtlink, the flowbite components that are new on the page don't work. Please help. My app.vue:

<template>
    <AppHeader />
    <main>
        <NuxtPage />
    </main>
    <AppFooter />
</template>

<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'

onMounted(() => {
    initFlowbite();
})
</script>

<template>
    <AppHeader />
    <main>
        <NuxtPage />
    </main>
    <AppFooter />
</template>

<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'

onMounted(() => {
    initFlowbite();
})
</script>

21 Replies

RushOP•12mo ago

I use flowbite from their site, via the html data parameter. Is that right? maybe I should init remove this script from the app and put it in each component separately? or each page

tDaniel•12mo ago

Idk but maybe you could watch the route then initFlowbite when it change? I never used flowbite tbh

Coton•9mo ago

hey @Rush did you find a better way than putting init on each componant / page ? Thanks !

RushOP•9mo ago

Hi, I stopped using init completely and instead initialized each component manually, they say it's better for single page applications

Coton•9mo ago

Ok thanks. I found this fyi : https://stackoverflow.com/questions/77693870/how-to-instantiate-initflowbite-globally-instead-of-per-page-component-in-nuxt and its working for me

RushOP•9mo ago

if I remember correctly, I also tried it and left it because, for example, the navbar remained open after changing the page, so I then closed it manually after changing the page

Coton•9mo ago

Oh ok. So probably depending on how we are using the app So currently if you need modal on a component you import it, a tooltip on an other, you import it too inside… can you confirm @Rush ? thanks

RushOP•9mo ago

I didn't understand you, how to import inside? if you want to close them after switching routes, you have to manually initialize them and add that logic there e.g. add a function to nuxtlink in that modal component that will hide it

Coton•9mo ago

I mean in your current workflow you are using onMounted(() => { initTooltips(); }) On a component which uses tooltip onMounted(() => { initModals(); initDropdowns(); }) In a component which uses modals + dropdowns… etc If I understand well. Regarding the issue reported by people like you : when switching page, the js didn’t work anymore

RushOP•9mo ago

Coton•9mo ago

You said « initialize each component manually » By this I guess that you are using code like the one I provided

RushOP•9mo ago

this is how i do it

RushOP•9mo ago

this is manually

Coton•9mo ago

Ohh I am not here yet I was more on the issue where the JS is broken by navigating on the app without hard refresh Which is fixed by onMounted everywhere OR the stack overflow I put You see ? Or… doing what to do is also a way to not have the JS broken

RushOP•9mo ago

I see, that solves the "broken" but flowbite is designed so that after changing the page everything is loaded again, nuxt doesn't do that, you have to add the logic for it yourself

RushOP•9mo ago

this is what i am calling on nuxtlink click

Coton•9mo ago

Yep but flowbite has a documentation page for nuxt install which don’t cover that. Thats why there is few people like me asking

RushOP•9mo ago

I had the same

Coton•9mo ago

But now I have a scenario where I need to close a modal from a js function. So I will initialize the modal in the same official way as you Until now never had the need to initialize a thing. Every tooltip, modal… work out the box with just html

RushOP•9mo ago

thats because of the nuxt for example in pure html or php project you dont have to do that because its not single page app

Coton•9mo ago

Yep here its because the dom is re-written

Gaming

Programming

Flowbite not working when using nuxtlink