How can the v-model of ElementPlus be implemented in niceGUI

[dzjwwm]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

from nicegui import app, ui

ui.add_body_html('''
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script defer src="https://unpkg.com/element-plus"></script>
''')
app.config.vue_config_script += '''
    app.use(ElementPlus);
'''

with ui.row(align_items='center'):
    ui.element('el-input').props('v-model="username"')
ui.run(port=8888)

Description

How can the v-model of ElementPlus be implemented in niceGUI

NiceGUI Version

3.2.0

Python Version

Python 3.10.18

Browser

Chrome

Operating System

macOS

Additional Context

I want to use the form function of ElementPlus and at the same time need to implement form validation

[evnchn]

For JavaScript component definition, you will need to follow https://github.com/zauberzeug/nicegui/tree/main/examples/custom_vue_component

On validation, NiceGUI does it in Python-land. Refer to https://github.com/zauberzeug/nicegui/blob/248e46f4fd3ab3eaca4c3e5a32696c793d44a04d/nicegui/elements/mixins/validation_element.py if you want to create your own ElementPlus input.

Also, contributions are welcome if you can get quite a few elements working.

[falkoschindler]

I don't think this is an issue with NiceGUI, but rather a question. Therefore I'm transferring it to a Q&A discussion.