{"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":"python","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,"search_vec":"'3.2.1':58 'applic':35 'beauti':25 'cadenc':64 'compon':18,28 'creat':32 'current':55 'depend':51 'design':17,38,76 'enabl':29 'extend':7 'extens':37 'follow':61 'frontend':77 'gui':70 'handcraft':26 'librari':23 'materi':16,27,75 'meant':43 'releas':63 'rich':33 'skill':39 'standalon':47 'trame':2,5,8,53,66,74 'trame-vuetifi':1,4 'ui':12,22,72 'updat':69 'use':46 'user':30 'version':56 'vuetifi':3,6,14,19,68,73 'web':34,71 'widget':10 'without':36","created_at":"2026-04-15T18:48:45.786494+00:00","updated_at":"2026-04-16T23:11:31.175088+00:00","problems":[{"fix":"pip install trame-vuetify","cause":"The `trame-vuetify` library has not been installed in the current Python environment.","error":"ModuleNotFoundError: No module named 'trame_vuetify'"},{"fix":"from trame.widgets import vuetify","cause":"The `vuetify` widgets module was not explicitly imported from `trame.widgets` before attempting to use its components.","error":"NameError: name 'vuetify' is not defined"},{"fix":"Correct the component name and casing, for example, `vuetify.VBtn`.","cause":"The specified Vuetify component name is either incorrect, uses wrong casing (e.g., `v_btn` instead of `VBtn`), or does not exist as an attribute within the `trame.widgets.vuetify` module.","error":"AttributeError: module 'trame.widgets.vuetify' has no attribute 'v_btn'"},{"fix":"from trame.app import get_server\nserver = get_server()","cause":"The Trame application server object has not been initialized with `get_server()` before being referenced (e.g., for `server.ui` or `server.state`).","error":"NameError: name 'server' is not defined"}],"ecosystem":"pypi","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":"3.2.2","cli_name":"","cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":"https://pypi.org/project/trame-vuetify/","npm":null,"openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":"passing","verified_at":"2026-06-28","last_verified":"2026-06-28","next_check":"2026-07-28","install_tag":null}}