Skip to content

Upgrade from Vue2 to Vue3 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
UlysseDurand wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Upgrade from Vue2 to Vue3 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a0ee90d
docs: tutorial upgrade from vue2 to vue3
UlysseDurand Apr 3, 2026
cef47b5
docs: fix dark theme on vue3
UlysseDurand Apr 9, 2026
62cc885
docs: change vuetify syntax usage in examples
UlysseDurand Apr 9, 2026
801ffb9
docs: make the code match the tutorial page code
UlysseDurand Apr 9, 2026
32e9c35
docs(examples): cookiecutter's vuetify3 practice
UlysseDurand Apr 10, 2026
a3a13f2
Merge branch 'Kitware:master' into fix-version
UlysseDurand Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions 00_setup/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.ui.vuetify3 import SinglePageLayout

# -----------------------------------------------------------------------------
# Get a server to work with
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()

# -----------------------------------------------------------------------------
# GUI
Expand Down
4 changes: 2 additions & 2 deletions 01_vtk/app_cone.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.ui.vuetify3 import SinglePageLayout

# -----------------------------------------------------------------------------
# Get a server to work with
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()

# -----------------------------------------------------------------------------
# GUI
Expand Down
8 changes: 4 additions & 4 deletions 01_vtk/app_flow.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -44,14 +44,14 @@
# Trame
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand Down
11 changes: 6 additions & 5 deletions 01_vtk/solution_cone.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -44,18 +44,19 @@
# Trame
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
view = vtk.VtkLocalView(renderWindow)
html_view = vtk.VtkLocalView(renderWindow)
ctrl.on_server_ready.add(html_view.update)


# -----------------------------------------------------------------------------
Expand Down
8 changes: 4 additions & 4 deletions 01_vtk/solution_flow.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import os
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkCommonColor import vtkNamedColors
from vtkmodules.vtkCommonCore import vtkLookupTable
Expand Down Expand Up @@ -127,14 +127,14 @@
# GUI
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand Down
8 changes: 4 additions & 4 deletions 01_vtk/solution_ray_cast.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
# Web imports
import os
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

# -----------------------------------------------------------------------------
# Example: SimpleRayCast
Expand Down Expand Up @@ -97,14 +97,14 @@
# Web Application setup
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand Down
8 changes: 4 additions & 4 deletions 02_layouts/app_cone.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -44,14 +44,14 @@
# Trame
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand Down
8 changes: 4 additions & 4 deletions 02_layouts/solution_FullScreenPage.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import VAppLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import VAppLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -44,12 +44,12 @@
# Trame
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with VAppLayout(server) as layout:
with layout.root:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand Down
8 changes: 4 additions & 4 deletions 02_layouts/solution_SinglePage.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -44,14 +44,14 @@
# Trame
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand Down
8 changes: 4 additions & 4 deletions 02_layouts/solution_SinglePageWithDrawer.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageWithDrawerLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -44,14 +44,14 @@
# Trame
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageWithDrawerLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand Down
8 changes: 4 additions & 4 deletions 03_html/app_cone.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -44,14 +44,14 @@
# Trame
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand Down
22 changes: 12 additions & 10 deletions 03_html/solution_buttons.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -44,29 +44,31 @@
# Trame
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
ctrl = server.controller

with SinglePageLayout(server) as layout:
with SinglePageLayout(server, theme=("theme", "light")) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
view = vtk.VtkLocalView(renderWindow)
ctrl.view_reset_camera = view.reset_camera

with layout.toolbar:
vuetify.VSpacer()
vuetify.VSwitch(
v_model="$vuetify.theme.dark",
vuetify3.VSpacer()
vuetify3.VSwitch(
v_model="theme",
false_value="light",
true_value="dark",
hide_details=True,
dense=True,
)
with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera):
vuetify.VIcon("mdi-crop-free")
with vuetify3.VBtn(icon=True, click=ctrl.view_reset_camera):
vuetify3.VIcon("mdi-crop-free")

# -----------------------------------------------------------------------------
# Main
Expand Down
30 changes: 16 additions & 14 deletions 03_html/solution_final.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vtk, vuetify
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand Down Expand Up @@ -49,7 +49,7 @@
# Trame setup
# -----------------------------------------------------------------------------

server = get_server(client_type = "vue2")
server = get_server()
state, ctrl = server.state, server.controller

# -----------------------------------------------------------------------------
Expand All @@ -71,11 +71,11 @@ def reset_resolution():
# GUI
# -----------------------------------------------------------------------------

with SinglePageLayout(server) as layout:
with SinglePageLayout(server, theme=("theme", "light")) as layout:
layout.title.set_text("Hello trame")

with layout.content:
with vuetify.VContainer(
with vuetify3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
Expand All @@ -84,8 +84,8 @@ def reset_resolution():
ctrl.view_reset_camera = view.reset_camera

with layout.toolbar:
vuetify.VSpacer()
vuetify.VSlider(
vuetify3.VSpacer()
vuetify3.VSlider(
v_model=("resolution", DEFAULT_RESOLUTION),
min=3,
max=60,
Expand All @@ -94,18 +94,20 @@ def reset_resolution():
dense=True,
style="max-width: 300px",
)
with vuetify.VBtn(icon=True, click=reset_resolution):
vuetify.VIcon("mdi-restore")
with vuetify3.VBtn(icon=True, click=reset_resolution):
vuetify3.VIcon("mdi-restore")

vuetify.VDivider(vertical=True, classes="mx-2")
vuetify3.VDivider(vertical=True, classes="mx-2")

vuetify.VSwitch(
v_model="$vuetify.theme.dark",
vuetify3.VSwitch(
v_model="theme",
false_value="light",
true_value="dark",
hide_details=True,
dense=True,
)
with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera):
vuetify.VIcon("mdi-crop-free")
with vuetify3.VBtn(icon=True, click=ctrl.view_reset_camera):
vuetify3.VIcon("mdi-crop-free")

# -----------------------------------------------------------------------------
# Main
Expand Down
Loading