From 2e6c4519cf9320b52aef517be9f3610e777b55f7 Mon Sep 17 00:00:00 2001
From: Julien Huang <julien.huang@outlook.fr>
Date: Mon, 24 Jul 2023 10:00:31 +0200
Subject: [PATCH] fix(nuxt): bind `createClientOnly` render function to ctx
 (#22289)

---
 packages/nuxt/src/app/components/client-only.ts       |  2 +-
 .../basic/components/client/Binding.client.ts         | 11 +++++++++++
 test/fixtures/basic/pages/client-only-components.vue  |  1 +
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 test/fixtures/basic/components/client/Binding.client.ts

diff --git a/packages/nuxt/src/app/components/client-only.ts b/packages/nuxt/src/app/components/client-only.ts
index a4fb2e47d2..f6739e118a 100644
--- a/packages/nuxt/src/app/components/client-only.ts
+++ b/packages/nuxt/src/app/components/client-only.ts
@@ -34,7 +34,7 @@ export function createClientOnly<T extends ComponentOptions> (component: T) {
     // override the component render (non script setup component)
     clone.render = (ctx: any, ...args: any[]) => {
       if (ctx.mounted$) {
-        const res = component.render!(ctx, ...args)
+        const res = component.render?.bind(ctx)(ctx, ...args)
         return (res.children === null || typeof res.children === 'string')
           ? createElementVNode(res.type, res.props, res.children, res.patchFlag, res.dynamicProps, res.shapeFlag)
           : h(res)
diff --git a/test/fixtures/basic/components/client/Binding.client.ts b/test/fixtures/basic/components/client/Binding.client.ts
new file mode 100644
index 0000000000..afad54cb48
--- /dev/null
+++ b/test/fixtures/basic/components/client/Binding.client.ts
@@ -0,0 +1,11 @@
+export default defineComponent({
+  name: 'Foo',
+  methods: {
+    getMessage () {
+      return 'Hello world'
+    }
+  },
+  render () {
+    return h('div', {}, this.getMessage())
+  }
+})
diff --git a/test/fixtures/basic/pages/client-only-components.vue b/test/fixtures/basic/pages/client-only-components.vue
index 302b002f00..cc588f5c25 100644
--- a/test/fixtures/basic/pages/client-only-components.vue
+++ b/test/fixtures/basic/pages/client-only-components.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <ClientBinding />
     <ClientScript ref="clientScript" class="client-only-script" foo="bar" />
     <ClientSetupScript
       ref="clientSetupScript"