Ipyvuetify's widgets look doesn't respect those on Vuetify documentation site

[sindzicat]

Hello! I started to learn Ipyvuetify. I decided to start from buttons. I use the latest version of JupyterLab and VS Code.

Almost I tested with buttons don't respect Vuetify documentation:

It's just nothing works. It's impossible to work with this library.

[sindzicat]

I found the way to make Ipyvuetify widgets look like those on Vuetify documentation site. I found that we must to place button inside Container. I found it when I clicked on Vuetify Play:

But it was not easy for me to found this solve.

[sindzicat]

prepend-icon just not works for buttons.

[sindzicat]

I found why prepend-icon argument doesn't works for v.Btn: it's missing in Python code (<python environment folder>/lib/site-packages/ipyvuetify/generated/btn.py:

btn.py

class Btn(VuetifyWidget):

    _model_name = Unicode('BtnModel').tag(sync=True)

    absolute = Bool(None, allow_none=True).tag(sync=True)

    active_class = Unicode(None, allow_none=True).tag(sync=True)

    append = Bool(None, allow_none=True).tag(sync=True)

    block = Bool(None, allow_none=True).tag(sync=True)

    bottom = Bool(None, allow_none=True).tag(sync=True)

    color = Unicode(None, allow_none=True).tag(sync=True)

    dark = Bool(None, allow_none=True).tag(sync=True)

    depressed = Bool(None, allow_none=True).tag(sync=True)

    disabled = Bool(None, allow_none=True).tag(sync=True)

    elevation = Union([
        Float(),
        Unicode()
    ], default_value=None, allow_none=True).tag(sync=True)

    exact = Bool(None, allow_none=True).tag(sync=True)

    exact_active_class = Unicode(None, allow_none=True).tag(sync=True)

    fab = Bool(None, allow_none=True).tag(sync=True)

    fixed = Bool(None, allow_none=True).tag(sync=True)

    height = Union([
        Float(),
        Unicode()
    ], default_value=None, allow_none=True).tag(sync=True)

    href = Union([
        Unicode(),
        Dict()
    ], default_value=None, allow_none=True).tag(sync=True)

    icon = Bool(None, allow_none=True).tag(sync=True)

    input_value = Any(None, allow_none=True).tag(sync=True)

    large = Bool(None, allow_none=True).tag(sync=True)

    left = Bool(None, allow_none=True).tag(sync=True)

    light = Bool(None, allow_none=True).tag(sync=True)

    link = Bool(None, allow_none=True).tag(sync=True)

    loading = Bool(None, allow_none=True).tag(sync=True)

    max_height = Union([
        Float(),
        Unicode()
    ], default_value=None, allow_none=True).tag(sync=True)

    max_width = Union([
        Float(),
        Unicode()
    ], default_value=None, allow_none=True).tag(sync=True)

    min_height = Union([
        Float(),
        Unicode()
    ], default_value=None, allow_none=True).tag(sync=True)

    min_width = Union([
        Float(),
        Unicode()
    ], default_value=None, allow_none=True).tag(sync=True)

    nuxt = Bool(None, allow_none=True).tag(sync=True)

    outlined = Bool(None, allow_none=True).tag(sync=True)

    replace = Bool(None, allow_none=True).tag(sync=True)

    retain_focus_on_click = Bool(None, allow_none=True).tag(sync=True)

    right = Bool(None, allow_none=True).tag(sync=True)

    ripple = Union([
        Bool(),
        Dict()
    ], default_value=None, allow_none=True).tag(sync=True)

    rounded = Bool(None, allow_none=True).tag(sync=True)

    small = Bool(None, allow_none=True).tag(sync=True)

    tag = Unicode(None, allow_none=True).tag(sync=True)

    target = Unicode(None, allow_none=True).tag(sync=True)

    text = Bool(None, allow_none=True).tag(sync=True)

    tile = Bool(None, allow_none=True).tag(sync=True)

    to = Union([
        Unicode(),
        Dict()
    ], default_value=None, allow_none=True).tag(sync=True)

    top = Bool(None, allow_none=True).tag(sync=True)

    type = Unicode(None, allow_none=True).tag(sync=True)

    value = Any(None, allow_none=True).tag(sync=True)

    width = Union([
        Float(),
        Unicode()
    ], default_value=None, allow_none=True).tag(sync=True)

    x_large = Bool(None, allow_none=True).tag(sync=True)

    x_small = Bool(None, allow_none=True).tag(sync=True)

So it's not correct to create and config widgets using only Vuetify documentation. We need to see source code of Ipyvuetify widgets first.

[sindzicat]

I see methods fab and active_class in source code in my previous comment. But according documentation:

Now I see why icon didn't work for me. Ipyvuetify uses an old version of Vuetify library, but there is nothing about this in documentation.

Also I found that Ipyvuetify uses Vue 2 JavaScript library, that is already sunseted.

[sindzicat]

Sorry, but there is nothing good in using such old JavaScript libraries under the hood.

[sindzicat]

Now I see, that we need use documentation from https://v2.vuetifyjs.com/ to create Ipyvuetify widgets correctly, but there is nothing about this in documentation.

[sindzicat]

I just found that the latest version of vuetifyjs-2 was released on Feb 14 2024. Not far ago, of course, but...

[mariobuikhuizen]

Apologies for the oversight! It seems the links weren't updated as intended. I'll rectify this promptly. Thank you for bringing it to our attention.

Additionally, we've initiated work on Vue3 and Vuetify3 support. While progress has been made with ipyvue PR #82 and ipyvuetify PR #283, recent time constraints have hindered our ability to allocate sufficient resources. However, you're welcome to explore the alpha releases for these updates: ipyvue==3.0.0a2 and ipyvuetify==3.0.0a2.

Thank you for your patience and understanding!