Tippy.vue icon indicating copy to clipboard operation
Tippy.vue copied to clipboard

getSSRProps is not defined in the directive

Open Evertvdw opened this issue 1 year ago • 1 comments

Hello! Thanks for making this library! I am going to use it in my project :)

I am using SSR though and that will throw an error when you include the v-tippy directive in any template that gets rendered during SSR.

The directive needs a getSSRProps function, as explained here: https://vuejs.org/guide/scaling-up/ssr.html#custom-directives. I don't think this directive has to do anything on SSR as tooltips are not really something that is relevant for the initial HTML rendered

As a current workaround you can do something like this:

import { TippyDirective } from "tippy.vue";

const _directive = TippyDirective as ObjectDirective;
_directive.getSSRProps = () => {
return {};
};
app.directive("tippy", _directive);

But it would be nice to include the getSSRProps in the actual source.

Evertvdw avatar Oct 27 '23 10:10 Evertvdw

Thanks for the report! I'll definitely take a look. The v-tippy directive does add prop/attributes, but they aren't used until after everything is mounted, which is probably why the empty implementation still works. I've had my fair share of frustration with libraries that don't work in SSR, so I'm glad the workaround is so simple :)

thecodewarrior avatar Oct 31 '23 19:10 thecodewarrior