Status: beta · 2026-06

A reference implementation of the fullscreen Vue embed pattern in NiceGUI — a single Vue component takes over the page, Python owns every piece of state via props, Vue is purely the view layer.

main.py        — NiceGUI app that mounts the Vue component on /
dashboard.js   — Vue 3 component (counter / live text echo / color picker / todo list)

from nicegui import ui
from nicegui.element import Element

class Dashboard(Element, component='dashboard.js'):
    def __init__(self) -> None:
        super().__init__()
        self._props['count'] = 0
        # ... all state lives in Python; Vue just renders
        self.on('increment', self._increment)
        # ... handlers are Python methods that mutate _props and call self.update()

Combined with ui.query('.nicegui-content').style('padding:0') to remove NiceGUI's default container padding, this gives you a full-bleed Vue surface inside a NiceGUI app — useful when:

• you have a designer-provided Vue/Vite component you want to host in a Python backend
• you want client-side reactivity for a small interactive island (e.g. live previews) while the rest of the app stays server-rendered
• you're migrating a Vue project incrementally to NiceGUI

The pattern itself has been load-bearing across dozens of in-house agent-built NiceGUI projects (29+ distinct sessions in the contributor's local agent history at time of writing). It works. The repo is beta-not-stable because:

• there's no test suite yet
• the docs don't cover every prop / event lifecycle edge case
• a future major-version NiceGUI release might tweak the Element API

python3 -m venv .venv
source .venv/bin/activate
pip install nicegui
python main.py

Open http://localhost:8080.

MIT — see LICENSE.