Why I need 3 hooks in a custom directive which adds classes if I'm using SSR?

[GJGabor]

I created a custom directive which adds classes to the element. I realized I have to:

• Add created hook to support hydration: without this hook I received a Hydration class mismatch warning
• Add beforeMount hook to support client side navigation: without this hook the class won't be added when I'm navigating on client side
• Add getSSRProps hook to handle server side rendering

Here is my code:

export const vClassPageWidth = {
    created: el => el.classList.add('max-w-48rem', 'mx-auto'), //required to support hydration
    beforeMount: el => el.classList.add('max-w-48rem', 'mx-auto'), //required to support client side navigation
    getSSRProps: () => ({ class: 'max-w-48rem mx-auto' }), //required to support server side rendering
};

Why I need to add all 3 hooks? It would be better to have 1 hook for the client side and 1 hook for the server side. Can anyone please explain the reason?

[LinusBorg]

Well, I think it's pretty self-explanatory why you would need two, at least: There are no HTML elements to work with on the server, it's just string concatenation. So you need a separate way to apply element attributes (and only for that use case!) during SSR.

I can't really speak about the beforeMount case which you seem to say is linked to vue-router? or some other client-side navigation situation? Not sure I ever encountered that, so don't understand the situation.

[skirtles-code]

I think the beforeMount is needed if the element also has its own class set, in the case where we aren't hydrating. created runs too early and the class from the directive gets overwritten:

• Playground