From f7fd89f09aadd2e55c95fe215dd0307f1cc01ee6 Mon Sep 17 00:00:00 2001
From: Alex Snezhko <alexsnezhko89@gmail.com>
Date: Tue, 7 Oct 2025 22:36:13 -0700
Subject: [PATCH 1/2] fix(compiler-ssr): textarea with v-text directive SSR

---
 .../src/transforms/ssrTransformElement.ts     | 18 +++++++---
 .../__tests__/ssrDirectives.spec.ts           | 33 +++++++++++++++++++
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index ee46894f9fc..3fbedc1ae57 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -122,8 +122,13 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
             | InterpolationNode
             | undefined
           // If interpolation, this is dynamic <textarea> content, potentially
-          // injected by v-model and takes higher priority than v-bind value
-          if (!existingText || existingText.type !== NodeTypes.INTERPOLATION) {
+          // injected by v-model and takes higher priority than v-bind value.
+          // Additionally, directives with content overrides (v-text/v-html)
+          // have higher priority than the merged props.
+          if (
+            !hasContentOverrideDirective(node) &&
+            (!existingText || existingText.type !== NodeTypes.INTERPOLATION)
+          ) {
             // <textarea> with dynamic v-bind. We don't know if the final props
             // will contain .value, so we will have to do something special:
             // assign the merged props to a temp variable, and check whether
@@ -176,9 +181,8 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
             ]
           }
         } else if (directives.length && !node.children.length) {
-          // v-text directive has higher priority than the merged props
-          const vText = findDir(node, 'text')
-          if (!vText) {
+          // v-text/v-html have higher priority than the merged props
+          if (!hasContentOverrideDirective(node)) {
             const tempId = `_temp${context.temps++}`
             propsExp.arguments = [
               createAssignmentExpression(
@@ -449,6 +453,10 @@ function findVModel(node: PlainElementNode): DirectiveNode | undefined {
   ) as DirectiveNode | undefined
 }
 
+function hasContentOverrideDirective(node: PlainElementNode): boolean {
+  return !!findDir(node, 'text') || !!findDir(node, 'html')
+}
+
 export function ssrProcessElement(
   node: PlainElementNode,
   context: SSRTransformContext,
diff --git a/packages/server-renderer/__tests__/ssrDirectives.spec.ts b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
index dfdebe971f5..652fb9e81bd 100644
--- a/packages/server-renderer/__tests__/ssrDirectives.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
@@ -172,6 +172,17 @@ describe('ssr: directives', () => {
       ).toBe(`<input type="checkbox" value="foo">`)
     })
 
+    test('element with v-html', async () => {
+      expect(
+        await renderToString(
+          createApp({
+            data: () => ({ foo: 'hello' }),
+            template: `<span v-html="foo"/>`,
+          }),
+        ),
+      ).toBe(`<span>hello</span>`)
+    })
+
     test('textarea', async () => {
       expect(
         await renderToString(
@@ -183,6 +194,28 @@ describe('ssr: directives', () => {
       ).toBe(`<textarea>hello</textarea>`)
     })
 
+    test('textarea with v-text', async () => {
+      expect(
+        await renderToString(
+          createApp({
+            data: () => ({ foo: 'hello' }),
+            template: `<textarea v-text="foo"/>`,
+          }),
+        ),
+      ).toBe(`<textarea>hello</textarea>`)
+    })
+
+    test('textarea with v-html', async () => {
+      expect(
+        await renderToString(
+          createApp({
+            data: () => ({ foo: 'hello' }),
+            template: `<textarea v-html="foo"/>`,
+          }),
+        ),
+      ).toBe(`<textarea>hello</textarea>`)
+    })
+
     test('dynamic type', async () => {
       expect(
         await renderToString(

From 1bab3363d8e43dcc3c7da1ca74d73c58b6310177 Mon Sep 17 00:00:00 2001
From: Alex Snezhko <alexsnezhko89@gmail.com>
Date: Tue, 7 Oct 2025 22:51:05 -0700
Subject: [PATCH 2/2] chore: move tests

---
 .../__tests__/ssrDirectives.spec.ts           | 68 ++++++++++---------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/packages/server-renderer/__tests__/ssrDirectives.spec.ts b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
index 652fb9e81bd..fdf16ba97cf 100644
--- a/packages/server-renderer/__tests__/ssrDirectives.spec.ts
+++ b/packages/server-renderer/__tests__/ssrDirectives.spec.ts
@@ -172,17 +172,6 @@ describe('ssr: directives', () => {
       ).toBe(`<input type="checkbox" value="foo">`)
     })
 
-    test('element with v-html', async () => {
-      expect(
-        await renderToString(
-          createApp({
-            data: () => ({ foo: 'hello' }),
-            template: `<span v-html="foo"/>`,
-          }),
-        ),
-      ).toBe(`<span>hello</span>`)
-    })
-
     test('textarea', async () => {
       expect(
         await renderToString(
@@ -194,28 +183,6 @@ describe('ssr: directives', () => {
       ).toBe(`<textarea>hello</textarea>`)
     })
 
-    test('textarea with v-text', async () => {
-      expect(
-        await renderToString(
-          createApp({
-            data: () => ({ foo: 'hello' }),
-            template: `<textarea v-text="foo"/>`,
-          }),
-        ),
-      ).toBe(`<textarea>hello</textarea>`)
-    })
-
-    test('textarea with v-html', async () => {
-      expect(
-        await renderToString(
-          createApp({
-            data: () => ({ foo: 'hello' }),
-            template: `<textarea v-html="foo"/>`,
-          }),
-        ),
-      ).toBe(`<textarea>hello</textarea>`)
-    })
-
     test('dynamic type', async () => {
       expect(
         await renderToString(
@@ -296,6 +263,41 @@ describe('ssr: directives', () => {
     })
   })
 
+  describe('template with v-text / v-html', () => {
+    test('element with v-html', async () => {
+      expect(
+        await renderToString(
+          createApp({
+            data: () => ({ foo: 'hello' }),
+            template: `<span v-html="foo"/>`,
+          }),
+        ),
+      ).toBe(`<span>hello</span>`)
+    })
+
+    test('textarea with v-text', async () => {
+      expect(
+        await renderToString(
+          createApp({
+            data: () => ({ foo: 'hello' }),
+            template: `<textarea v-text="foo"/>`,
+          }),
+        ),
+      ).toBe(`<textarea>hello</textarea>`)
+    })
+
+    test('textarea with v-html', async () => {
+      expect(
+        await renderToString(
+          createApp({
+            data: () => ({ foo: 'hello' }),
+            template: `<textarea v-html="foo"/>`,
+          }),
+        ),
+      ).toBe(`<textarea>hello</textarea>`)
+    })
+  })
+
   describe('vnode v-show', () => {
     test('basic', async () => {
       expect(