Vue.js 3与Vaadin集成的事件问题及语法校验困扰

问题1：Vaadin校验Vue文件语法不通过，如何绕过？ #

Vaadin默认会对前端资源做语法校验，.vue文件的语法不符合Lit或普通JS/HTML的校验规则，导致无法通过。可以通过以下两种方式跳过校验：

方式1：修改Maven插件配置（适用于Vaadin Flow Maven项目） #

在pom.xml的vaadin-maven-plugin中添加排除规则，让插件忽略.vue文件：

<plugin>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-maven-plugin</artifactId>
    <version>${vaadin.version}</version>
    <configuration>
        <!-- 排除所有.vue文件的校验 -->
        <exclude>**/*.vue</exclude>
    </configuration>
</plugin>

方式2：调整前端打包工具配置（Vite/Webpack） #

如果项目用Vite作为前端打包工具，修改vite.config.js，让ESLint忽略.vue文件：

export default {
  eslint: {
    exclude: ['**/*.vue']
  }
}

如果是Webpack，修改webpack.config.js中的ESLint loader配置，添加排除规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules|.vue$/,
        loader: 'eslint-loader'
      }
    ]
  }
}

问题2：Vue 3组件触发事件让Vaadin通过@DomEvent捕获 #

你的代码问题在于用了Vue的this.$emit，这是Vue组件内部的事件机制，不会触发原生DOM事件，Vaadin的@DomEvent只能捕获原生DOM事件。以下是修正方案：

修正后的Vue 3组件代码 #

<script>
export default {
  name: "custom-view",
  template: "<button @click='fireEvent'> Fire Event</button>",
  methods: {
    fireEvent() {
      // 使用CustomEvent传递自定义数据，必须开启冒泡让Vaadin捕获
      const customEvent = new CustomEvent("custom-name", {
        detail: { name: "Agustin" },
        bubbles: true,
        cancelable: true
      });
      // 获取组件根DOM元素，派发原生事件
      this.$el.dispatchEvent(customEvent);
    }
  }
}
</script>

调整Vaadin端的事件定义 #

因为数据放在了CustomEvent的detail属性中，需要修改@EventData的路径：

@DomEvent("custom-name")
public class ClickEvent extends ComponentEvent<CustomView> {
    private final String name;

    public ClickEvent(CustomView source,
                      boolean fromClient,
                      @EventData("event.detail.name") String name) {
        super(source, fromClient);
        this.name = name;
    }

    // 提供getter方法供Vaadin组件获取数据
    public String getName() {
        return name;
    }
}

关键注意点 #

• 必须用dispatchEvent派发原生DOM事件，不能用Vue的$emit
• 事件要设置bubbles: true，否则无法冒泡到Vaadin组件所在的DOM节点
• 自定义数据要放在CustomEvent的detail属性中，这是标准的自定义事件数据传递方式
• Vaadin的@EventData注解路径要对应event.detail.xxx，才能正确提取数据

内容的提问来源于stack exchange，提问作者Agustn Ernesto Cardeilhac Bans