Multiple suite of components for nicegui

[alegue87]

Hello,

i have started a little project for integration some other suite of componets like Naive, Vuetify and PrimeVue.

https://vimeo.com/1014704643?share=copy

this is the code: https://github.com/alegue87/nicegui

what do you think about this?

[me21]

Great work, very promising in my opinion! It would be even more awesome if you could write an article or something like that on how a custom suite of components could be integrated into NiceGUI. The examples already have https://github.com/zauberzeug/nicegui/tree/main/examples/custom_vue_component, but an extended explanation would be useful, I think.

[alegue87]

thanks a lot, that's encouraging!

I updated the readme with the steps to take to set up the development environment (only the framework at the moment).

There are 4 suites available that can be used all together in dev mode and individually only Naive and quasar for now.

The example found in the multiple_ui folder of examples uses Naive for the layout and the menu and shows some elements of the various suites.

this is the link of readme

and this is the framework at work: video

[kleynjan]

“De gustibus non est disputandem” -- but I think Quasar really is horribly ugly. So @alegue87 I think this is a very interesting example.

Do you have any ideas on making such non-Quasar component sets importable? I'm itching particularly to make Primevue available, but I don't want to maintain an entire NiceGUI fork to embed it in. If not I'm going to dig in a bit myself.

BTW, one tip for your readme: do an editable install of the "multi_ui" Nicegui repo, after creating the env:
pip install -e ...<path_to_cloned_multi_ui_repo>/nicegui

This would replace the symlink, which didn't really work for me.

[alegue87]

..is not easy create an importer for nicegui. I have modified some code of the original project, and are not only a some files added
But, when i have some time, i will try to make it if you are interested.

Thank you for the tip, i will add it in future in the readme

[kleynjan]

Hi Alessandro, I'm certainly interested. We can use add_head_html for JS and CSS imports, but the index.html template in particular seems to be tricky. I wonder if we can hook onto the js_imports or vue_scripts variable to inject the Primevue config:

/* templates/index.html */
.....
    <script type="module">
      const app = createApp(parseElements(String.raw`{{ elements | safe }}`), {
        version: "{{ version }}",
        prefix: "{{ prefix | safe }}",
        query: {{ socket_io_js_query_params | safe }},
        extraHeaders: {{ socket_io_js_extra_headers | safe }},
        transports: {{ socket_io_js_transports | safe }},
        quasarConfig: {{ quasar_config | safe }},
      });

      {{ js_imports | safe }}
      {{ vue_scripts | safe }}

      const dark = {{ dark }};
      Quasar.lang.set(Quasar.lang["{{ language }}".replace('-', '')]);
      Quasar.Dark.set(dark === None ? "auto" : dark);
      {% if tailwind %}
      if (dark !== None) tailwind.config.darkMode = "class";
      if (dark === True) document.body.classList.add("dark");
      {% endif %}

      app.mount("#app");

@falkoschindler I know there are some recurring discussions about opening NiceGUI up a bit for other Vue tools, do you have any preferences or guidance?

Cheers,
-Peter

[alegue87]

ok.

But you can't use a python components maybe. I have added a list of some component and there are avaible for python's method of usage:

Commit of components

If you don't use it are available only a inline's style.

[falkoschindler]

@kleynjan I guess you can already add UI components from non-Quasar libraries (like ui.joystick using nipplejs). Regarding UI frameworks like naive, vuetify or PrimeVue: I haven't worked with them yet, so it's hard to tell what customization options NiceGUI would need to profide for switching the framework. I'm open for suggestions.
For whole component suites like @alegue87 demonstrated, I could imagine separate projects/repos providing separate namespaces:

from nicegui import ui
from nicegui_naive import nn
from nicegui_vuetify import nv
from nicegui_primevue import np

nn.button('Click me')
nv.button('Click me')
np.button('Click me')

ui.run()

Or maybe - because different suites won't be used simultaneously anyway - we can re-use/extend the well-known ui namespace:

from nicegui_naive import ui

ui.button('Click me')

ui.run()

[kleynjan]

Hi @falkoschindler, thank you for the considered reply, as always. @alegue87 I'm stuck with other work for the next few weeks but I intend to pick it up after that. Cheers, Peter

[evnchn]

I am trying to rekindle the discussion with a proper assessment of what UI framework to use (if it fits) at feature request #4858. Tell me what you think!

[git2212]

for me it's a tossup between Vuestic and PrimeVue ...

[rodja]

Just a note: since 2.21.0 NiceGUI has an easy way to add other Vue UI Frameworks: https://nicegui.io/documentation/section_styling_appearance#using_other_vue_ui_frameworks

[git2212]

I've seen that in the docs... but the statement 'This is an experimental feature. Many NiceGUI elements are likely to break, and the API is subject to change.' was rather ominous lol. Also, I was not able to find any examples for something more complex than a button...

... maybe it's just my use-case but i rely extensively on tailwind CSS to achieve desired functionality, which may or may not port to another UI Framework. I was assuming that the poster's efforts would result in an abstraction layer of some sort... ideally one should not have to rewrite the UI code to switch frameworks... although that would not be a trivial change to the programming-model.

[alegue87]

I haven't tried version 2.21.0 and the experimental feature for using multiple suite, and I'm hard pressed to see how it can be implemented without writing a component for each suite.

I'll try to explain myself better

I tried to give an example some time ago

https://github.com/alegue87/nicegui/blob/main/examples/multi_ui/main.py

It was not necessary to switch the suite at a high level, and this method is probably wrong but it is still necessary to implement a template and its "manager" for each suite.. or am I wrong?

For example.. Naive template
https://github.com/alegue87/nicegui/blob/main/nicegui/elements/naive/daten.js

Prime vue
https://github.com/alegue87/nicegui/blob/main/nicegui/elements/prime_vue/datep.js

Vuetify
https://github.com/alegue87/nicegui/blob/main/nicegui/elements/vuetify/datev.js

They are not simple buttons and sometimes have specific properties and distinct templates.

I'm no expert but ideally you should specify the suite at a high level, load the relevant library and use a group specifically implemented for that suite.

What approach was used for 2.21.0?