{"id":6921,"library":"trame-vuetify","title":"trame-vuetify","description":"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.","status":"active","version":"3.2.1","language":"en","source_language":"en","source_url":"https://github.com/Kitware/trame-vuetify","tags":["GUI","Web UI","Vuetify","Trame","Material Design","Frontend"],"install":[{"cmd":"pip install trame-vuetify","lang":"bash","label":"Install latest version"}],"dependencies":[{"reason":"Core framework that trame-vuetify extends to provide UI components.","package":"trame","optional":false},{"reason":"Required for the Trame core functionality.","package":"trame-client","optional":false}],"imports":[{"note":"This provides access to all Vuetify components wrapped for Trame.","symbol":"vuetify","correct":"from trame.widgets import vuetify"}],"quickstart":{"code":"from trame.app import get_server\nfrom trame.ui.vuetify import SinglePageLayout\nfrom trame.widgets import vuetify\n\nserver = get_server(client_type=\"vue3\") # Set client_type explicitly for Trame v3\n\n@server.state.change(\"slider_value\")\ndef on_slider_change(slider_value, **kwargs):\n    print(f\"Slider value changed to: {slider_value}\")\n\nwith SinglePageLayout(server) as layout:\n    layout.title.set_text(\"Trame-Vuetify Example\")\n    with layout.content:\n        with vuetify.VContainer():\n            vuetify.VSlider(\n                label=\"Example Slider\",\n                min=0,\n                max=100,\n                v_model=(\"slider_value\", 50), # (state_variable, default_value)\n                class_=\"my-4\",\n            )\n            vuetify.VTextField(\n                label=\"Your Name\",\n                v_model=(\"name\", \"Trame User\"),\n                clearable=True,\n                outlined=True,\n            )\n            vuetify.VBtn(\n                \"Hello\",\n                click=\"alert(`Hello ${name}!`)\",\n                color=\"primary\",\n                class_=\"mt-2\",\n            )\n\nif __name__ == \"__main__\":\n    server.start()","lang":"python","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"trame >= 3.0.0"},{"fix":"Always convert kebab-case component names from Vuetify documentation to CamelCase when using `trame.widgets.vuetify`. For example, `<v-btn>` becomes `vuetify.VBtn()`.","message":"Vuetify component names in HTML (kebab-case, e.g., `<v-text-field>`) translate to Python as CamelCase class names (e.g., `vuetify.VTextField`).","severity":"gotcha","affected_versions":"All versions"},{"fix":"Ensure all boolean attributes are explicitly assigned `True` or `False`.","message":"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)`).","severity":"gotcha","affected_versions":"All versions"},{"fix":"Replace dashes and colons with underscores for attribute names in Python.","message":"HTML attributes using dashes (`-`) or colons (`:`) in Vuetify (e.g., `v-model`, `:suffix`) are converted to underscores (`_`) in Python (e.g., `v_model`, `suffix`).","severity":"gotcha","affected_versions":"All versions"},{"fix":"Use `attribute_name=python_function` for server-side handlers or `attribute_name=\"javascript_expression\"` for client-side logic.","message":"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.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-15T00:00:00.000Z","next_check":"2026-07-14T00:00:00.000Z","problems":[]}