Skip to content

Props modifiers in render functions do not handled properly on SSR #14262

@igorexa34314

Description

@igorexa34314

Vue version

v3.5.26

Link to minimal reproduction

https://play.vuejs.org/#__SSR__eNp9kd9LwzAQx/+VIy/ZoLaIPs0qqEzQBxX1MQilva2daRKSdCuU/u9e0m3uQX0IyX3vc7lfA7s1Jt12yBYsd6VtjAeHvjM3QjWt0dbDvW4NrKxugadZMPiVUHk2wYSR4bE1svBIFkAemIyeeXais4R5V2q1atbpxmlF+YZAC1YS3ki0L8Y3WjnBFhA9wVdIqXdPUfO2w+SglzWWX7/oG9cHTbBXiw7tFgU7+nxh1+gn9/L9GXt6H52trjpJ9D/ON3RadqHGCbvrVEVln3Cx2sc4tUatP9yy96jcoalQaCDHyAtGQw+T+qv1n3Iv0ssYJ9RIUwwxqXc0v/1+hgpXjYp/aYXKJ1CP+31RCi4srYgO9pEmuOhkvE+DZkNgYNr9bL63ACzZVsFsfn0D9YzX5zyBgX9WhS/OCu8tXwCvkfomnafGahOUnbay4tQp8IdOlaG5QkJYdEzG59P3NAm6xzkbvwF6Z9cj

Steps to reproduce

  1. Open the Vue SFC Playground reproduction
  2. Enable SSR and switch preview tab to "SSR Output" .
  3. Inspect the rendered HTML

What is expected?

According to Vue docs (https://vuejs.org/guide/extras/render-function) we can pass props modifiers such as .prop and .attr to h() function to pick the way how keys should be assigned (either as attribute or prop).

What is actually happening?

In SSR mode, when passing props modifiers such as ^ or . to h() function, they are not proccessed and rendered as raw string.

For example is we specify

h('h1', {'^data-attr': 'hello', '.prop': 'world' }, 'Functional component')

We will get the following HTML output

<h1 ^data-attr="hello" .prop="world">Functional component</h1>

It only happens when SSR is enabled

System Info

Any additional comments?

Reported in nuxt/nuxt#33902

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: ssr

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions