diff --git a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
index 49eb9ff9..d830e716 100644
--- a/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrComponent.spec.ts
@@ -17,6 +17,20 @@ describe('ssr: components', () => {
`)
})
+ // event listeners should still be passed
+ test('event listeners', () => {
+ expect(compile(``).code).toMatchInlineSnapshot(`
+ "const { resolveComponent: _resolveComponent, mergeProps: _mergeProps } = require(\\"vue\\")
+ const { ssrRenderComponent: _ssrRenderComponent } = require(\\"vue/server-renderer\\")
+
+ return function ssrRender(_ctx, _push, _parent, _attrs) {
+ const _component_foo = _resolveComponent(\\"foo\\")
+
+ _push(_ssrRenderComponent(_component_foo, _mergeProps({ onClick: _ctx.bar }, _attrs), null, _parent))
+ }"
+ `)
+ })
+
test('dynamic component', () => {
expect(compile(``).code)
.toMatchInlineSnapshot(`
diff --git a/packages/compiler-ssr/src/index.ts b/packages/compiler-ssr/src/index.ts
index 37333471..1775af52 100644
--- a/packages/compiler-ssr/src/index.ts
+++ b/packages/compiler-ssr/src/index.ts
@@ -10,7 +10,8 @@ import {
trackSlotScopes,
noopDirectiveTransform,
transformBind,
- transformStyle
+ transformStyle,
+ transformOn
} from '@vue/compiler-dom'
import { ssrCodegenTransform } from './ssrCodegenTransform'
import { ssrTransformElement } from './transforms/ssrTransformElement'
@@ -70,11 +71,12 @@ export function compile(
directiveTransforms: {
// reusing core v-bind
bind: transformBind,
+ on: transformOn,
// model and show has dedicated SSR handling
model: ssrTransformModel,
show: ssrTransformShow,
// the following are ignored during SSR
- on: noopDirectiveTransform,
+ // on: noopDirectiveTransform,
cloak: noopDirectiveTransform,
once: noopDirectiveTransform,
memo: noopDirectiveTransform,
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index 32991ed8..be530ebb 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -194,7 +194,7 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
if (!needMergeProps) {
node.children = [createInterpolation(prop.exp, prop.loc)]
}
- } else if (!needMergeProps) {
+ } else if (!needMergeProps && prop.name !== 'on') {
// Directive transforms.
const directiveTransform = context.directiveTransforms[prop.name]
if (directiveTransform) {