How to connect Vue 3 GUI with Python code to create a desktop application?

46 Views Asked by At

I'm trying to connect a Vue 3 GUI with a Python application using PyQt6, but when I run the built GUI application, the views don't load even though Vue itself seems to be working. The application runs normally when I test it on XAMPP. I tried using CEF (Chromium Embedded Framework), but it's not supported with the version of Python I have, and the last updates are from 2 years ago. Does anyone have any ideas on what I should do and what I might be doing wrong? I guess I probably need to run the GUI as an HTTP server.

Versions:

Python: v3.12.0, VueJS: v3.4.15

My Code:

import json
import os
import sys
from PyQt6.QtCore import QUrl, QSize
from PyQt6.QtGui import QIcon
from PyQt6.QtWebEngineCore import QWebEnginePage
from PyQt6.QtWidgets import QApplication, QMainWindow
from PyQt6.QtWebEngineWidgets import QWebEngineView

# ================= # (Vue 3 - Client UI) # ================= #
# > | Vue 3 Client UI Localization
uiClientPath = os.path.join(os.getcwd(), 'vue-app', 'dist')
# ================= # (Vue 3 - Client UI) # ================= #


class App(QApplication):
    def __init__(self, sys_argv):
        super().__init__(sys_argv)

        # ================= # (Splash Screen - Sizes) # ================= #
        # > | Splash Screen Size
        self.main_window.resize(1024, 770)

        # > | Blocking Screen Stretching
        self.main_window.setFixedSize(QSize(1024, 770))
        # ================= # (Splash Screen - Sizes) # ================= #

        # ================= # (Client UI - Init) # ================= #
        # > | Load Client UI
        self.web_view = QWebEngineView()
        self.web_page = WebEnginePage()
        self.web_view.setPage(self.web_page)
        self.web_view.load(QUrl.fromLocalFile(os.path.join(uiClientPath, 'index.html')))
        self.main_window.setCentralWidget(self.web_view)

        self.main_window.show()
        # ================= # (Client UI - Init) # ================= #

def javascript_error_handler(type, value, traceback):
    print(f"JavaScript Error: {value}")
    print(f"JavaScript Error: {type.__name__}: {value}, {traceback}")

class WebEnginePage(QWebEnginePage):
    def javaScriptConsoleMessage(self, level, message, lineNumber, sourceID):
        #print(json.dumps(message))
        if isinstance(message, dict) or isinstance(message, list):
            errorMsg = json.dumps(message)
        else:
            errorMsg = str(message)
        print(f"JavaScript Console ({level}): {errorMsg} (line {lineNumber})")


if __name__ == "__main__":
    app = App(sys.argv)
    sys.excepthook = javascript_error_handler
    sys.exit(app.exec())
0

There are 0 best solutions below