trame-vuetify

3.2.1 · active · verified Wed Apr 15

Trame-vuetify extends Trame's widgets and UI with Vuetify's Material Design components. Vuetify is a UI Library with beautifully handcrafted Material Components, enabling users to create rich web applications without extensive design skills. It is not meant to be used standalone but as a dependency of `trame`. The current version is 3.2.1, and it follows the release cadence of `trame` and `Vuetify` updates.

Warnings

breaking Trame v3 (released January 2024) defaults to a Vue 3 client. Older Trame applications built with `trame` v2 (which used Vue 2 by default) may experience breaking changes, especially if not explicitly setting `server.client_type = "vue2"` or if relying on Vuetify 2 specific APIs. `trame-vuetify` must now be explicitly installed as it's no longer bundled with the `trame` core.
Fix: For new projects, set `server.client_type = "vue3"` and ensure `trame-vuetify` is installed. For migrating existing `trame` v2 projects, explicitly set `server.client_type = "vue2"` and install `trame-vuetify`. Be aware of potential Vuetify API changes between v2 and v3.
gotcha Vuetify component names in HTML (kebab-case, e.g., `<v-text-field>`) translate to Python as CamelCase class names (e.g., `vuetify.VTextField`).
Fix: Always convert kebab-case component names from Vuetify documentation to CamelCase when using `trame.widgets.vuetify`. For example, `<v-btn>` becomes `vuetify.VBtn()`.
gotcha Implicit boolean attributes in Vuetify HTML (e.g., `<v-text-field disabled />`) must be explicitly set to `True` in Python (e.g., `vuetify.VTextField(disabled=True)`).
Fix: Ensure all boolean attributes are explicitly assigned `True` or `False`.
gotcha HTML attributes using dashes (`-`) or colons (`:`) in Vuetify (e.g., `v-model`, `:suffix`) are converted to underscores (`_`) in Python (e.g., `v_model`, `suffix`).
Fix: Replace dashes and colons with underscores for attribute names in Python.
gotcha Vue.js events prefixed with `@` (e.g., `@click="runMethod"`) are handled by passing the Python function reference directly to the attribute name (e.g., `click=runMethod`). For direct JS expressions, wrap them in a string.
Fix: Use `attribute_name=python_function` for server-side handlers or `attribute_name="javascript_expression"` for client-side logic.

Install

pip install trame-vuetify Install latest version

Imports

vuetify
```
from trame.widgets import vuetify
```
This provides access to all Vuetify components wrapped for Trame.

Quickstart

This quickstart demonstrates a basic Trame application using `trame-vuetify` components like `VSlider`, `VTextField`, and `VBtn` within a `SinglePageLayout`. It shows how to bind Python state variables (`slider_value`, `name`) to Vuetify components and handle events. Explicitly setting `client_type="vue3"` is recommended for `trame` v3.

from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
from trame.widgets import vuetify

server = get_server(client_type="vue3") # Set client_type explicitly for Trame v3

@server.state.change("slider_value")
def on_slider_change(slider_value, **kwargs):
    print(f"Slider value changed to: {slider_value}")

with SinglePageLayout(server) as layout:
    layout.title.set_text("Trame-Vuetify Example")
    with layout.content:
        with vuetify.VContainer():
            vuetify.VSlider(
                label="Example Slider",
                min=0,
                max=100,
                v_model=("slider_value", 50), # (state_variable, default_value)
                class_="my-4",
            )
            vuetify.VTextField(
                label="Your Name",
                v_model=("name", "Trame User"),
                clearable=True,
                outlined=True,
            )
            vuetify.VBtn(
                "Hello",
                click="alert(`Hello ${name}!`)",
                color="primary",
                class_="mt-2",
            )

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

view raw JSON →