How to access vnode on getSSRProps (working with directives)? #12861
-
(edited for clarity) Motivation: The goal is to do a computation with a vue directive during SSR, using the attributes on the html element as useful information. Currently, it seems that the for example: <script setup lang="ts">
import { type Directive, ref } from 'vue'
const randomValue = ref("")
const vRandomDirective: Directive<HTMLElement, string> = {
getSSRProps(_, vnode) {
console.log("vnode:", vnode) // this is null, so it seems that `vnode.props.type` is not retrievable
return undefined
},
}
</script>
<template>
<p>Please check console for vnode</p>
<p>tip: ensure SSR is turned on (in case it matters)</p>
<input type="text" v-random-directive="randomValue" placeholder="input for testing" />
</template> I need to access the So then, How do I access a vnode on getSSRProps when working with directives? Note: I'm aware that I can use the Please let me know if I can provide any other useful information. Many thanks and kind regards, |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
When rendering a template for SSR, Vue generates an HTML string directly, it doesn't create any VNodes. The lack of VNode is mentioned (albeit briefly) in the documentation for
You can see the relevant source code here: core/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts Lines 12 to 22 in 263f63f You can see more details for how this works via the Playground. On the right-hand side you'll see 4 tabs: Preview, JS, CSS and SSR. If you open the SSR tab you'll see how the template is compiled down for SSR: function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
_push(`<!--[--><p>Please check console for vnode</p><p>tip: ensure SSR is turned on (in case it matters)</p><input${_ssrRenderAttrs(_mergeProps({
type: "text",
placeholder: "input for testing"
}, _ssrGetDirectiveProps(_ctx, $setup["vRandomDirective"], $setup.randomValue)))}><!--]-->`)
} The |
Beta Was this translation helpful? Give feedback.
When rendering a template for SSR, Vue generates an HTML string directly, it doesn't create any VNodes.
The lack of VNode is mentioned (albeit briefly) in the documentation for
getSSRProps
at https://vuejs.org/guide/scaling-up/ssr.html#custom-directives. Note this comment:You can see the relevant source code here:
core/packages/server-renderer/src/helpers/ssrGetDirectiveProps.ts
Lines 12 to 22 in 263f63f
You can see mor…