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

Merged
jourdain merged 13 commits into from
May 2, 2026
Merged

Upgrade from Vue2 to Vue3 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 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
adfd845
docs(examples): use TrameApp in 04_application
UlysseDurand Apr 14, 2026
5c00c17
docs(examples): remove useless paraview.web.venv import
UlysseDurand Apr 15, 2026
8a97690
Merge branch 'Kitware:master' into fix-version
UlysseDurand Apr 15, 2026
8df341f
docs(tutorial): put the functions out of the class
UlysseDurand Apr 15, 2026
8d7ff6e
docs(examples): dense=True -> density="compact" for vue3
UlysseDurand Apr 16, 2026
5e00ef8
docs(tutorial): density compact as of vue3 specification
UlysseDurand Apr 28, 2026
aea03a2
docs(tutorial): use TrameApp in the paraview tutorial
UlysseDurand Apr 28, 2026
727f4cc
docs(tutorial): update the 03_html example to use best practice
UlysseDurand Apr 28, 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
Comment thread
UlysseDurand marked this conversation as resolved.
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
Comment thread
UlysseDurand marked this conversation as resolved.
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:
Comment thread
UlysseDurand marked this conversation as resolved.
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
Comment thread
UlysseDurand marked this conversation as resolved.

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:
Comment thread
UlysseDurand marked this conversation as resolved.
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
91 changes: 45 additions & 46 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.app import TrameApp
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk, vuetify3 as v3

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
Expand All @@ -12,55 +12,54 @@
)

# Required for interactor initialization
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch # noqa
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch # noqa: F401

# Required for rendering initialization, not necessary for
# local rendering, but doesn't hurt to include it
import vtkmodules.vtkRenderingOpenGL2 # noqa


# -----------------------------------------------------------------------------
# VTK pipeline
# -----------------------------------------------------------------------------

renderer = vtkRenderer()
renderWindow = vtkRenderWindow()
renderWindow.AddRenderer(renderer)

renderWindowInteractor = vtkRenderWindowInteractor()
renderWindowInteractor.SetRenderWindow(renderWindow)
renderWindowInteractor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()

cone_source = vtkConeSource()
mapper = vtkPolyDataMapper()
mapper.SetInputConnection(cone_source.GetOutputPort())
actor = vtkActor()
actor.SetMapper(mapper)

renderer.AddActor(actor)
renderer.ResetCamera()

# -----------------------------------------------------------------------------
# Trame
# -----------------------------------------------------------------------------

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

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

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

import vtkmodules.vtkRenderingOpenGL2 # noqa: F401

class AppCone(TrameApp):
def __init__(self, server=None):
super().__init__(server)
self.vtk_pipeline()
self._build_ui()

def vtk_pipeline(self):
self.renderer = vtkRenderer()
self.renderWindow = vtkRenderWindow()
self.renderWindow.AddRenderer(self.renderer)

self.renderWindowInteractor = vtkRenderWindowInteractor()
self.renderWindowInteractor.SetRenderWindow(self.renderWindow)
self.renderWindowInteractor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()

self.cone_source = vtkConeSource()
self.mapper = vtkPolyDataMapper()
self.mapper.SetInputConnection(self.cone_source.GetOutputPort())
self.actor = vtkActor()
self.actor.SetMapper(self.mapper)

self.renderer.AddActor(self.actor)
self.renderer.ResetCamera()

def _build_ui(self):
with SinglePageLayout(self.server) as self.ui:
self.ui.title.set_text("Hello trame")

with self.ui.content:
with v3.VContainer(
fluid=True,
classes="pa-0 fill-height",
):
self.view = vtk.VtkLocalView(self.renderWindow)

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

def main():
app = AppCone()
app.server.start()

if __name__ == "__main__":
server.start()
main()
Loading