Skip to content

Corrections and upgrade from Vue2 to Vue3#877

Open
UlysseDurand wants to merge 3 commits intoKitware:masterfrom
UlysseDurand:docs-tutoriel-vue3
Open

Corrections and upgrade from Vue2 to Vue3#877
UlysseDurand wants to merge 3 commits intoKitware:masterfrom
UlysseDurand:docs-tutoriel-vue3

Conversation

@UlysseDurand
Copy link
Copy Markdown
Contributor

This PR depends on Kitware/trame-tutorial#7
because trame and trame-tutorial are referencing one another.

Correct the tutorial and upgrade it from Vue2 to Vue3.

  • Some corrections
    • Code parts from Trame1 were remaining
    • Code parts were not corresponding between doc and examples
  • Change vuetify to vuetify3 in the code
  • Change VSelect's items' text and value
  • Change toggle dark theme mechanism


**First**, our ***trame*** imports have also changed. Thus, we will replace

```python
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should keep the code from the begining of the file but update it

from trame.app import TrameApp
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3 as v3
from trame.widgets import vtk, trame


```python
with SinglePageWithDrawerLayout(server) as layout:
with SinglePageWithDrawerLayout(server, theme=("theme", "light")) as layout:
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as self.ui

Also you should use the TrameApp base class.

with layout.content:
# content components
with vuetify.VContainer(
with vuetify3.VContainer(
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use v3 instead of vuetify3

**Second**, we instantiate the `layout` object, create the `vtk.VtkLocalView` component, and add it directly to its `root` element using a Vuetify `VContainer` with arguments descripted in the [VTK](vtk) chapter.

```python
with VAppLayout(server) as layout:
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

as self.ui


```python
with VAppLayout(server) as layout:
with layout.root:
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

with self.ui.root:

@@ -76,7 +76,7 @@ with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")

with layout.content:
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

with self.ui.content:

children=[html_view],
)
import paraview.web.venv
from trame.app import get_server
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

from trame.app import TrameApp

from trame.app import get_server
from trame.widgets import vuetify3, paraview
from trame.ui.vuetify3 import SinglePageLayout
server = get_server()
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use class

@jourdain
Copy link
Copy Markdown
Collaborator

I would update to the structure shown here: https://kitware.github.io/trame/examples/core/basics.html#class-for-trame-application

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants