[Vuejs]-Custom Vue 3 directive updates element's style only after it's been mounted in Nuxt 3

by

1👍

✅

I figured it out. After @EstusFlask mentioned that the problem is with SSR, I checked what the Vue documentation had to say about custom directives & SSR and found out that I need to use the getSSRProps hook.

This is the updated directive (the whole Nuxt plugin), which works fine with SSR:

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('visibility', {
        beforeMount: handleVisibility,
        updated: handleVisibility,
        getSSRProps: (binding) => {
            return {
                style: {
                    visibility: binding.value ? 'visible' : 'hidden',
                },
            }
        },
    })
})

const handleVisibility = (el: HTMLElement, binding: DirectiveBinding<boolean>) => {
    el.style.visibility = binding.value ? 'visible' : 'hidden'
}
👤Matej

Leave a comment