0

The problem is flowbite's js(like menu or dropdowns) do not work when vue router has async/await things.

So when i remove await keyword everything works fine, but the thing is i need that async/await to authenticate a user. The js that placed in vue components works fine always. Tailwind and flowbite was installed accorded to official flowbite documentation/ Also i've noticed that when js is not working and i go to not existed url like http://localhost/test and go back to previous url then, the js, surprisingly, works fine. I think it happens because the flowbite inits before the page comletely load, at the moment when the router do its magic, but i dont know how to fix it. Anyone know how to fix that? I will be grateful for any advice.

The actual code with the problem:

import { initFlowbite } from 'flowbite'

async function isAuthenticated() {
    const response = await axios.get('/api/user')
    return response.data;
}

router.beforeEach(async(to, from) => {
    const user = await isAuthenticated();
    const isAuth = user !== ''

    if (to.meta.isAuthPage === true && isAuth === true) {
        return {name: 'dashboard'}
    }
    if (isAuth === false && to.meta.requiresAuth === true) {
        return {name: 'login'}
    }
})

Works fine when removing async/await, but lose required functionaluty:

import { initFlowbite } from 'flowbite'

async function isAuthenticated() {
    const response = await axios.get('/api/user')
    return response.data;
}

router.beforeEach((to, from) => {
    const user = isAuthenticated();
    const isAuth = user !== ''

    if (to.meta.isAuthPage === true && isAuth === true) {
        return {name: 'dashboard'}
    }
    if (isAuth === false && to.meta.requiresAuth === true) {
        return {name: 'login'}
    }
})

I also tried to put flowbiteInit() to App component like:

import { initFlowbite } from 'flowbite'
mounted() {
    initFlowbite() 
},

Also tried to put init to beforeEach() after async/await row and even to the component that vue-router renders according to route but result is still the same.

zaketn
  • 1
  • Please, provide https://stackoverflow.com/help/mcve for your problem. It's exotic and requires to be fully aware what's going on in your case. "I also tried to put flowbiteInit" - also? This is the only way initFlowbite is used in your example. I'm not aware of flowbite but I assume you're already in not very good situation because you use a framework-unfriendly lib with the framework. This isn't much different to using jQuery, etc with Vue, which is a huge PITA to do properly. The router is only the tip of the iceberg, you can get a lot of similar problems with app async behavior – Estus Flask Jul 10 '23 at 15:34
  • You can try https://router.vuejs.org/guide/advanced/navigation-guards.html#global-after-hooks for such thing but this is just a quick and dirty fix for more fundamental problem – Estus Flask Jul 10 '23 at 15:40
  • There is the flowbite-vue lib, but it doesnt have such variety of components like the original library and im too lazy to customize them by hands. I've kinda solve the problem by avoid using async/await in router and slightly change the authorization approach. Im new to vue and didnt know there could be problems with non framework-frindly libs. Thanks for the answer – zaketn Jul 10 '23 at 16:33
  • The most important job some wrapper like flowbite-vue do is that they integrate it with the framework. In this case they seem to reimplement the whole JS part in Vue which is a legit and least troublesome approach for UI lib. I'd strongly advice to stick to it if it's maintained and doesn't have fundamental problems and extend it per need basis, this will result in much less flaky app on the long run. The approach they suggest in the official docs https://flowbite.com/docs/getting-started/vue/ is a footgun – Estus Flask Jul 10 '23 at 17:01

0 Answers0