Choose vue 3 UI framework

[BracketJohn]

Goal

List vue 3 ui component frameworks.

Context

We may want to switch away from ant-design-vue. For this we should list and evaluate existing CSS frameworks. The comparison in the end should be similar to this one ORM comparison we did: https://github.com/sidestream-tech/shift-book/issues/49#issuecomment-1152344039

Tasks

• list shortcomings of ant-design vue
• List answerable and understandable requirements in a first comment
  • answerable means: you should be able to give clear yes / no / number answers in a short form
  • understandable means: people with a base of web-development can read and understand them in a couple of words
  • see Get open-source ready #1 for some requirements already gathered
• discuss requirements with @BracketJohn
• Then create a table overview of exisitng frameworks that support vue3
  • rate them in the requirements you listed above

[imuhammadtalhakhan]

Initial set of questions

1. Has stable support for Vue 3 ?
2. Typescript ?
3. has complex components like tables with filters and more, calenders, range pickers etc ?
4. easy to customize/extend/rework inadequate UI solutions out of product ?
5. has direct support with some CSS framework i.e, build on top of some css framework like tailwind ?
6. Actively developed / widely used / Github acitivity?
7. Is paid or free or has premium features ? (do we consider paid products here ?)
8. Other important points -> caveats and problems known from experience and more ?
9. Comment ?

[zoey-kaiser]

AntDesign 3 Vue

1. Has stable support for Vue 3?

Yes, it does.

2. Typescript ?

I could not find any exact information about this in their documentation. Looking at their GitHub Repo, TypeScript is used, however I do not know what the developer experience of AntDesign 3 looks like.

3. has complex components like tables with filters and more, calenders, range pickers etc ?

Yes, it does.

4. easy to customize/extend/rework inadequate UI solutions out of product ?

Can be extended inside the project by using TailWindCSS classes. However, customizing things like the the primarly-color require a modification of the LESS files. This needs a little bit more setup. See unified-auctions-ui for how we did it there (however this was AntDesign 2 not 3, but the system only slightly changed).

6. has direct support with some CSS framework i.e, build on top of some css framework like tailwind ?

No natively, however Tailwind classes can be used to overwrite any AntDesign styles.

8. Actively developed / widely used / Github acitivity?

Yes, last release was 21 days ago. AntDesign is a product developed by a Chinese UI development company. AntDesign Vue is a community maintained fork that re-write the React components into Vue.

10. Is paid or free or has premium features ? (do we consider paid products here ?)

Free

[zoey-kaiser]

PrimeFaces (PrimeVue)

1. Has stable support for Vue 3?

Yes, it does.

2. Typescript ?

Yes, it has complete Typescript support for every component.

3. has complex components like tables with filters and more, calenders, range pickers etc ?

Yes, it does. However, @valiafetisov previously noticed that the Table component works slightly different then in other libraries. (Shift clicking on two entries will not select the entries between)

4. easy to customize/extend/rework inadequate UI solutions out of product ?

They have an extensive Theming system, with a generation website to go along with it. See here.

6. has direct support with some CSS framework i.e, build on top of some css framework like tailwind ?

The framework has multiple base themes. One of these is based on TailWindCSS allowing us to integrate our Tailwind code into the pre made component nicely.

8. Actively developed / widely used / Github acitivity?

Yes, last release was 6 days ago.

10. Is paid or free or has premium features ? (do we consider paid products here ?)

Free, with premium pre-build blocks (which I assume we do not need)

[BracketJohn]

list shortcomings of ant-design vue

(edit this comment in place to extend the list)

• uses undefined to represent missing values, which clashes with null handling used by typeorm (and many other tools, libs, conventions)
• bad esm support that keeps on tripping - right now npm run build is broken as antd does a "bad" esm import under the hood ([1]),
  • underlying problem: usage of dependencies with bad esm support, like dayjs or lodash babel-regenerator
  • related issues:
    • [Bug]: @babel/runtime：Package path . is not exported from package babel/babel#14874
• auto-import support often quite slow + types are not hinted correctly for some of the components,
• the ant-design-vue website is quite slow to use (evenb compared to its react counterpart)

[1] bas ESM support

 ERROR  [h3] [unhandled] Error: Cannot find module lodash-es/isPlainObject imported from repos/sidestream/sidebase/app, repos/sidestream/sidebase/, repos/sidestream/sidebase/app/_index.js, repos/sidestream/sidebase/node_modules

[zoey-kaiser]

list shortcomings of ant-design vue

(edit this comment in place to extend the list)

• uses undefined to represent missing values, which clashes with null handling used by typeorm (and many other tools, libs, conventions)
• bad esm support that keeps on tripping - right now npm run build is broken as antd does a "bad" esm import under the hood ([1]),
• auto-import support often quite slow + types are not hinted correctly for some of the components,
• the ant-design-vue website is quite slow to use (evenb compared to its react counterpart)

[1] bas ESM support

 ERROR  [h3] [unhandled] Error: Cannot find module lodash-es/isPlainObject imported from repos/sidestream/sidebase/app, repos/sidestream/sidebase/, repos/sidestream/sidebase/app/_index.js, repos/sidestream/sidebase/node_modules

I agree with these shortcomings, however I wanted to ask if they apply to only AntDesign 2 or also AntDesign 3?

[BracketJohn]

I agree with these shortcomings, however I wanted to ask if they apply to only AntDesign 2 or also AntDesign 3?

all of these points are only applicable to ant design 3 (as in: I have not validated them for ant design 2)

[imuhammadtalhakhan]

Initial set of questions
.....
9. Comment ?

@BracketJohn do you think these questions are enough while considering a component library for vue 3 ?

[BracketJohn]

Is paid or free or has premium features ? (do we consider paid products here ?)

no paid products, there's enough high quality, free CSS libs for that!

@valiafetisov do you have any requirements to add here?

[valiafetisov]

The title of the issue seems misleading, since ant-design-vue is not a CSS framework, but a UI library. CSS frameworks are typically ones that only provide some reusable CSS classes like tailwind or bootstrap does and this issue seems to not question our decision to use tailwind.

Regarding switching to another UI library from ant-design-vue, I would like to compare their functionality so that it's not a downgrade. The approach can be to collect a top list of components we typically use together with their most complex features and check if those features are available in the other framework. For example: Table (fixed columns, sorting, filtering, pagination, selectable rows) Notifications (slots, call) Modals (closable/non-closable mask, no header) Select (multi-select) Calendar (disabled, highlighted days).

[imuhammadtalhakhan]

	PrimeVue	Quasar	Element UI	Agnostic UI	Flowbite Vue	Vuetify
Vue 3	✅	✅	✅	✅	✅	❌ (not yet in beta)
Typescript	✅	✅	✅	✅	✅	✅
Feature Rich Components like Table (fixed columns, sorting, filtering, pagination, selectable rows) Notifications (slots, call) Modals (closable/non-closable mask, no header) Select (multi-select) Calendar (disabled, highlighted days).	✅(second most feature rich)	✅(most feature rich)	✅	❌(not enough)	❌	✅
Github activity ⇒ stars / last commit	2.8k / 1 Sep 22	21.9k / 31 Aug 22	16.9k / 1 Sep 22	461 / 10 Aug 22	68 / 2 Aug 22	35.2k / 21 Aug 22
Built on top of some framework as tailwind would provide ease in UI modifications ?	❌ (primeflex ?)	❌	❌	❌	✅	❌
Other important points ?	charts component, theming support	theming support, plugins…the $q object, extra vue directives, plugins, composables and more…		theme support

[BracketJohn]

check out this list and see if there's more libraries worth comparing in here: https://github.com/antfu/unplugin-vue-components#importing-from-ui-libraries

edit, one twitter voice saying primevue over ant-design: https://twitter.com/CryptoNukz/status/1566412814578769920

[ManUtopiK]

Hi! Sidebase looks great. Awesome!

I don't know the scope of Sidebase and also this issue, if it's related to a CSS framework or UI framework.
Just I suggest considering also those UI frameworks :

• https://www.naiveui.com
• https://oruga.io

[BracketJohn]

Definitely related to UI - I've clarified this in the issue title.

Hi! Sidebase looks great. Awesome!

Thanks @ManUtopiK, we appreaciate the feedback, feel free to give more and to recommend sidebase to others ❤️

[zoey-kaiser]

Hi @ManUtopiK thanks for the suggestions 🤗!

• https://www.naiveui.com

I am pretty impressed by this framework. While the design patterns do remind me a bit of AntDesign, it has a few components that are very unique. I think it does make sense to include it in our discussion! We might also be able to offer multiple versions of sidebase, each with a separate framework, allowing developers to choose their favourite.

• https://oruga.io

What I really like about this framework is its ability to be modified with the help of TailwindCSS. While this is theoretically possible with most frameworks, I enjoy how they feature it on their documentation site, leading me to believe that their components are written in such a way that there is minor collision with Tailwind styles (which we do have in other frameworks).

[BracketJohn]

Brief update: I think the general direction here is rather to build a small CLI where the users can select certain options they want to se5trup the project with.

One question could then be: What CSS UI framework do you want to use? A, B or C?

This CLI is tracked in #13

[ineshbose]

Been following this issue/project for a few weeks now - this is fantastic, and also a project extremely close to my interest!

As far as a component library goes, I've adopted PrimeVue personally because of the options and research I did seeing plenty others using it as well; I am currently in the process of trying to integrate it with Tailwind. This is after requiring to migrate a Vue 2 project using BootstrapVue (which is not very active atm) to Nuxt 3.

But a CLI would be very good option since it gives customisation to other users and instead of specialising in providing compatibility for only one library, it optimises for multiple. I believe a setup wizard similar create-nuxt-app would not return for Nuxt 3 which rather uses nuxi, so this can be a great way to setup projects. Happy to contribute where I can!

[BracketJohn]

Awesome! I agree that a CLI would be great at this point. From crunching through the nuxt/framework repo it looks like @atinux et al. don't have a large focus on this at the moment, so I think it's fair to start.

We have #13 for the cli, @zoey-kaiser is starting on a PoC of it at the moment (:

[ManUtopiK]

Hey!
Do you like tailwindcss ? Or even better : unocss ?
Do you know about vueuse ?
There is now a UI framework that use both of this excellent libraries !
It's very new, but looks awesome https://anu-vue.netlify.app

[BracketJohn]

Thanks for the suggestions!

Let's collect ideas here: #13 (comment)

[BracketJohn]

for now we've settled on naive ui, checkout #80 to follow implementation progress.