Registry / web-framework / trame-vuetify

trame-vuetify

library3.2.2pypypi✓ verified 90d ago

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.

web-framework

pip install trame-vuetify

package ↗

INSTALL

IMPORT

SIG · TRAME-VUETIFY

trame-vuetify

web-frameworkpythonv3.2.2

Install

1.9s avg

Import

159ms

Disk

33MB

Pass rate

10/ 10

Env Coverage10 / 10

glibc

3.9–3.13

musl

3.9–3.13

Install & Compatibility

Where this runs

tested against v3.2.2 · pip install

no network on importno background threads

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

py 3.10–3.920 runs

installs and imports cleanly · install 0.0s · import 0.167s · 34.6MB

glibc

py 3.10–3.920 runs

installs and imports cleanly · install 1.9s · import 0.151s · 35MB

33MB installed

● package 33MB

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vuetify

✓ from trame.widgets import vuetify

This provides access to all Vuetify components wrapped for Trame.

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()

Debug

Known issues

breakingTrame 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.

affects: trame >= 3.0.0

gotchaVuetify 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()`.

affects: All versions

gotchaImplicit 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`.

affects: All versions

gotchaHTML 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.

affects: All versions

gotchaVue.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.

affects: All versions

Errors

Common errors & fixes

ModuleNotFoundError: No module named 'trame_vuetify'

The `trame-vuetify` library has not been installed in the current Python environment.

fix

pip install trame-vuetify

NameError: name 'vuetify' is not defined

The `vuetify` widgets module was not explicitly imported from `trame.widgets` before attempting to use its components.

fix

from trame.widgets import vuetify

AttributeError: module 'trame.widgets.vuetify' has no attribute 'v_btn'

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.

fix

Correct the component name and casing, for example, `vuetify.VBtn`.

NameError: name 'server' is not defined

The Trame application server object has not been initialized with `get_server()` before being referenced (e.g., for `server.ui` or `server.state`).

fix

from trame.app import get_server
server = get_server()

Upgrade

Version history

3.2.2latest on PyPI · released Apr 28, 2026

Audit

Dependencies

tramerequiredCore framework that trame-vuetify extends to provide UI components.

trame-clientrequiredRequired for the Trame core functionality.

Agent activity

14 hits · last 30 days

node

Resources

packagehttps://pypi.org/project/trame-vuetify/ ↗