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) {