component_vue

Decorator to create a component backed by a Vue template.

def component_vue(
    vue_path: str,
    vuetify=True,
    tags: Dict[str, Any] = {},
    to_json: Dict[str, Callable[[Any, widgets.Widget], Any]] = {},
    from_json: Dict[str, Callable[[Any, widgets.Widget], Any]] = {},
) -> Callable[[Callable[P, None]], Callable[P, solara.Element]]:

    ...

Although many components can be made from the Python side, sometimes it is easier to write components using Vue directly. It can also be beneficial for performance, since instead of creating many widgets from the Python side we only send data to the frontend. If event handling is also done on the frontend, this reduces latency and makes you app feel much smoother.

All arguments of the function are exposed as Vue properties. Argument pairs of the form foo, and on_foo are assumed by refer to the same vue property, with on_foo being the event handler when foo changes from the vue template.

Arguments of the form event_foo should be callbacks that can be called from the vue template. They are available as the function foo and event_foo in the vue template.

Note that foo was kept for backwards compatibility, but LLM's have a tendency to use event_foo, so this was changed to event_foo.

See the vue v2 api for more information on how to use Vue, like watch, methods and lifecycle hooks such as mounted and destroyed.

See the Vue component example for an example of how to use this decorator.

The underlying trait can be passed extra arguments by passing a dictionary to the tags argument. The most common case is to pass a custom serializer and deserializer for the trait, for which we added the strictly typed to_json and from_json arguments. Otherwise pass a dictionary to the tags argument, see the example below for more details.

Examples

A component that takes a foo argument and an on_foo callback that gets called when foo changes (from the frontend).

import solara

@solara.component_vue("my_foo_component.vue")
def MyFooComponent(foo: int, on_foo: Callable[[int], None]):
    pass

The following component only takes in a month argument and an event_date_clicked callback that gets called from the vue template using this.date_clicked({'extra-data': 42, 'day': this.day}).

import solara

@solara.component_vue("my_date_component.vue")
def MyDateComponent(month: int, event_date_clicked: Callable):
    pass

Example with custom serializer and deserializer

import solara

def to_json_datetime(value: datetime.date, widget: widgets.Widget) -> str:
    return value.isoformat()

def from_json_datetime(value: str, widget: widgets.Widget) -> datetime.date:
    return datetime.date.fromisoformat(value)

@solara.component_vue("my_date_component.vue", to_json={"month": to_json_datetime}, from_json={"month": from_json_datetime})
def MyDateComponent(month: datetime.date, event_date_clicked: Callable):
    pass

# the following will be the same, except that it is less strictly typed
@solara.component_vue("my_date_component.vue", tags={"month": {"to_json": to_json_datetime, "from_json": from_json_datetime}})
def MyDateComponentSame(month: datetime.date, event_date_clicked: Callable):
    pass

Arguments

• vue_path: The path to the Vue template file.
• vuetify: Whether the Vue template uses Vuetify components.