How To Create Custom Component From Python Side

[mcaox]

I still explore the capacity of this awesome Framework !!!

I managed to create a custom Js VueComponent with its v-model and its own behaviour through a vuejs plugin, which adds this TestComponent to the app in the install entrypoint.

install: function(app, options){
    app.component("TestComponent",TestComponent); 
},

It behaves as expected when used in python :

• Creation of the wrapped Element

class TestComponent(HtmlElement):
    def __init__(self, children=None, **kwargs):
        super().__init__("TestComponent", children, **kwargs)

• use of the wrapped Element

TestComponent(v_for="(data,ind) in my_list"))
    

Is there a way to create such a TestComponent only from the python side.

class TestComponent(????):
     ????

[jourdain]

I'm not sure what you are asking?

It seems that you managed to build your JS lib and use it from Python. Are you asking how to skip the JS lib build by doing everything from Python or something else?

[mcaox]

Indeed I want to skip both the JS development and built steps. The reason is that the final developers are not fullstack.

Up until now, I used an architecture that may be resumed as :

class TestComponent:
    def ui(self,v_model):
        html.Span(f"{v_model}.name")

comp = TestComponent()
with html.Div(v_for="(data,ind) in my_list")):
    comp.ui(v_model="data"
        

The manual wrapping whenever a v_for is required is a bit clumsy. That's why I am looking for a more direct way.

[jourdain]

If you are just composing what is already there html/vuetify/... you can definitely do it from Python.

You can see some examples here.
In several customers projects (close source), I have tuned VCard with built-in collapsible behavior written in plain Python.

[mcaox]

Thank you for this answer. I will investigate examples.

One of the use case is a dynamic update of the content. I tried to use the virtual nodes, but do not manage to use them with vue3.
See dedicated issue