[V2]Multiple clicks of the Wails + Vue button take effect

Open
#4,285 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
42/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Quiet
Tech stack
go, javascript
Domain
desktop, frontend

Research direction

Start by reproducing the issue with the example in frontend/src/components/CameraView.vue, comparing the Vite development server with the embedded production build configured in main.go. Inspect the click handler and Wails/WebView2 setup, then verify that one click changes the icon and triggers the function once in the production environment.

Written by the indexing model from the issue text.

Description

awaiting feedback Bug P2 v2 Windows
Description

When developing a desktop application based on the Wails + Vue technology architecture, the following abnormalities were found in the function button interaction module: 'There is a latency phenomenon in the operation response, and it takes 3-5 consecutive clicks to trigger core functions (such as window full-screen switching/privacy mode), but the UI visual feedback (button flashing animation) has taken effect immediately'. After cross validation, the exception can be reproduced stably on both my Win10 desktop and Win11 notebook devices. It is worth noting that there is no exception when performing the same operation in the local development server (http://localhost:5173/).
Through the comparison test between the development environment and the production environment, it is found that the problem is concentrated in the WebView2 container environment. The preliminary judgment is that there is a compatibility conflict between the event handling mechanism of WebView2 and Element-Plus, but the context bridging logic of Wails still needs to be further verified. Due to the cross-stack interaction between the Go language runtime and the Web front-end technology, it is uncertain whether the open-source community of the relevant UI framework has targeted Technical Support capabilities for such underlying compatibility issues.

To Reproduce

Image

frontend/package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "element-plus": "^2.9.10",
    "vue": "^3.5.13",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.4",
    "unplugin-auto-import": "^19.2.0",
    "unplugin-vue-components": "^28.5.0",
    "vite": "^6.3.5"
  }
}

main.go

package main

import (
	"embed"

	"github.com/wailsapp/wails/v2"
	"github.com/wailsapp/wails/v2/pkg/options"
	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
)

//go:embed all:frontend/dist
var assets embed.FS

func main() {
	app := NewApp()

	err := wails.Run(&options.App{
		Title:           "Test",
		Width:           500,
		Height:          282,
		Frameless:       true,
		CSSDragProperty: "widows",
		CSSDragValue:    "1",
		AssetServer: &assetserver.Options{
			Assets: assets,
		},
		OnStartup: app.startup,
		Bind: []interface{}{
			app,
		},
	})

	if err != nil {
		println("Error:", err.Error())
	}
}

frontend/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Test</title>
</head>
<body style="widows: 1">
<div id="app"></div>
<script src="./src/main.js" type="module"></script>
</body>
</html>

frontend/vite.config.js

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'

export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ]
})

frontend/src/main.js

import {createApp} from 'vue'
import App from './App.vue'
import router from "./router/index.js";

import './style.css';

const app = createApp(App)
app.use(router)
app.mount('#app')

frontend/src/style.css

*{
    margin: 0;
    padding: 0;
}

frontend/src/App.vue

<template>
  <router-view/>
</template>

frontend/src/router/index.js

import { createWebHistory, createRouter } from 'vue-router'

import CameraView from "../components/CameraView.vue";
import SettingsView from "../components/SettingsView.vue";

const routes = [
    { path: '/', component: CameraView },
    { path: '/setting', component: SettingsView },
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router

frontend/src/components/CameraView.vue

<script setup>
import {ref} from "vue";
import {Hide, View} from '@element-plus/icons-vue'

const showIcon = ref(true)

const handleClick = () => {
  showIcon.value = !showIcon.value;
  console.log(showIcon.value ? "Hide icon is now visible" : "View icon is now visible");
}
</script>

<template>
  <div class="app-container">
    <el-container>
      <el-main class="main-container"></el-main>
      <el-footer class="footer-container">
        <el-button
            type="primary"
            @click="handleClick"
            :icon="showIcon ? Hide : View"
        />
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.app-container {
  height: 100vh;
}

.main-container {
  height: calc(100vh - 50px);
}

.footer-container {
  height: 50px;
  background-color: #C6E2FF;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
Expected behaviour

State changes (such as icon switching) and function execution need to be synced up, no latency or asynchronization/asynchronous phenomenon

Screenshots

No response

Attempted Fixes

No response

System Details
# Wails
Version | v2.10.1


# System
┌──────────────────────────────────────────────────────────────────────────────────────┐
| OS           | Windows 10 Pro                                                        |
| Version      | 2009 (Build: 19045)                                                   |
| ID           | 22H2                                                                  |
| Go Version   | go1.24.1                                                              |
| Platform     | windows                                                               |
| Architecture | amd64                                                                 |
| CPU          | Intel(R) Core(TM) i5-10500 CPU @ 3.10GHz                              |
| GPU          | Intel(R) UHD Graphics 630 (Intel Corporation) - Driver: 31.0.101.1999 |
| Memory       | 16GB                                                                  |
└──────────────────────────────────────────────────────────────────────────────────────┘

# Dependencies
┌───────────────────────────────────────────────────────┐
| Dependency | Package Name | Status    | Version       |
| WebView2   | N/A          | Installed | 136.0.3240.64 |
| Nodejs     | N/A          | Installed | 22.12.0       |
| npm        | N/A          | Installed | 10.9.0        |
└───────────────────────────────────────────────────────┘
Additional context

No response

Dominant language
Go
Stars
36.3k
Forks
1.9k
Avg merge
2d 11h
Merged PRs (30d)
33

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from wailsapp/wails

All issues in wailsapp/wails

Similar issues

More Go issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.