🤹🏻‍♂️ Framework stability in Vue Ecosystem & my vision about anu

[zernonia]

This is a good proposal @jd-solanki ! 💚
I couldn't agree more with the 3 problems you stated above.

Although shadcn-vue provides a good low level way of constructing a component, however I find it difficult for beginner dev or anyone to "just use" the component with props/event/slot ready.

I had a similar idea in mind to create a UI library that handle this exact problem, which is to provide high level components, and at the same time low level (Radix Vue) component with a consistent theming capabilities.

And with your suggestion of framework guidelines with consistent naming convention, I believe that would reduce the fear of updating major version. 💚

I do however foresee some challenges regarding implementing a framework guidelines that would be adopt by every framework, but we can definitely start somewhere!

[sadeghbarati]

Hi, Thanks for the write, I agree with most of the things you mentioned here but one "Mix low-level and high-level API/props"

https://mui.com/material-ui/react-alert/

Component Per Node is the way ✅

https://github.com/mui/material-ui/discussions/41085

---

Mixed props and low-level components ❌

<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>

<template>
    <!-- how can I change font-size of description without touching the actual component -->
    <Alert title="Heads up!" description="..." />
    
    
    <!-- this will cause confusion -->
    <Alert title="Heads up!" description="...">
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>...</AlertDescription>
    </Alert> 
</template>

Slots this is not the way

<script setup lang="ts">
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
</script>

<template>
    <Alert :classes="{ root: { class: 'text-red-900' }, title: { class: 'text-red-800' } }">
        <template #title>
            Heads up!
        </template>
        
        <template #description>
            ...
        </template>
        
        <template #icon>...</template>
    </Alert>
    
    <Alert>
        <template #icon>...</template>
        <AlertTitle class="text-red-800">Heads up!</AlertTitle>
        <AlertDescription class="bg-green-600">...</AlertDescription>
    </Alert> 
</template>

---

We don't need 10 frameworks that does the same thing differently but 1 framework that does things accurately

I can relate to that quote.

Also every UI framework has its own way of doing the code

• Vue script setup
• Vue defineComponent Composition API
• Vue defineComponent Option API
• Vue export default
• TS and defineComponent setup return
• TS and defineComponent Option API render
• TSX and Option API
• TSX and Composition API
• VueVine
• and Whole other possible ways/style of using Vue

Although defineProps doesn't support node_modules external extended complex types and I'm not fan of defineEmits, for UI frameworks/libs it's better to stick to the Vue script setup syntax cause it is more friendly syntax for beginner dev

[jd-solanki]

Readers of this issue might be interested in this new repo, Check README.

[SoCuul]

@jd-solanki I'd recommend putting a node at the top of the official docs and GitHub repo to tell people about the state of the ui framework, so they don't start a brand new project with it.

[jd-solanki]

Today, I had another thought 💭

I'll address these issues in framework guidelines/solutions

• As the framework evolve, Framework author might rename prop, slot or component itself due to name normalization (like initially author introduce data prop for table rows but later they decide rows will be much more better name and rename the prop, Woah you have broken code 😬). There might be case where even component can be renamed in cases where component name is confusing, Sidebar => Offcanvas/SlideOver.

• There can also be case where prop's value get transformed. Like for list item we can have icon="i-mdi-home" initially but later we get option for configuring size as well :icon="{ name: 'i-mdi-home', size: 24 }"

[sohaha]

Every upgrade to the current front-end project, be it a UI library or tool chain, is a disaster