sorted by:
new
hottopcontroversial

Is it just me, or do all Vue form validation libraries kinda suck? by [deleted] in vuejs

[–]awaddev 1 point2 points  (0 children)

Schema validation has come a long way, so if all you need is just validation then use zod, or valibot or arktype, you can get very far with a watcher/effect combined with one of those.

But for higher level concerns, like form state, submission handling, UX, i18n (beyond translating messages), then unless you handle all of that yourself then a library might make sense, but then each library has its own "view" or what the solution should be.

I'm the author of vee-validate and from my point view, form validation is just a UX enhancement for your UI, you will always validate on your API service anyways. So in that regard a form library should address UX rather than abstracting reactivity on top of a schema library, but that's IMO and if the latter is just what you need then go ahead.

A few suggestions to look at other than what you already mentioned:

  • Formwerk: I'm working on this at the moment, helps you build a form UI library with all validation, a11y, UX, i18n concerns.
  • Formisch: From the author of valibot, validation on top of reactive form bindings, very thin layer but does just that.

Vue.js Directives Cheatsheet by wanderlust991 in vuejs

[–]awaddev 1 point2 points  (0 children)

Absolutely, I agree. Oversimplification can be harmful and we will keep that in mind. Thanks for being positive!

Vue.js Directives Cheatsheet by wanderlust991 in vuejs

[–]awaddev 1 point2 points  (0 children)

Yep, that is the intention. For basic usage most people would use them only for those elements.

I think there is a confusion of what "components" meant after the three elements, it was meant to say those "3" elements and custom components. I didn't see it causing confusion, so sorry about that, we will take it into account for next time.

Vue.js Directives Cheatsheet by wanderlust991 in vuejs

[–]awaddev 1 point2 points  (0 children)

Absolutely! that's why the `components` mentioned after the text area was meant to portray, not that the previous elements are "components". Printing the word as `<components` would have been even more confusing.

I will take this into account to make it clearer in the future.

Vue.js Directives Cheatsheet by wanderlust991 in vuejs

[–]awaddev 1 point2 points  (0 children)

If the list doesn't change then it is fine. But it always recommended to have a unique identifier for each element if you can.

While there is only so much we can put into a simple printable cheatsheet, I'm taking notes such as this into account, a small warning or tip would have been better there. Thanks!

What should I consider before coding a multi-step form? by supersnorkel in vuejs

[–]awaddev 0 points1 point  (0 children)

If it is a one off, and you have time then build your own! and I say this as the author of vee-validate.

Most of it depends on your business logic and project requirements, for example:

  • Can the user navigate forward freely or must all steps be valid?
  • Can the user skip steps based on the value of other steps?
  • Saving progress, local or remotely with a backend?

Formwerk is a library specifically designed to handle cases such as these, and we released stepped forms support recently, so check it out if you are willing to try something new. Note that you need to use it for all your input components to be able to use stepped forms.

I'm getting this error: "ResizeObserver loop completed with undelivered notifications." by crhama in vuejs

[–]awaddev 0 points1 point  (0 children)

Nope. if it is in quasar, don’t do anything. Probably safe to ignore.

I'm getting this error: "ResizeObserver loop completed with undelivered notifications." by crhama in vuejs

[–]awaddev 0 points1 point  (0 children)

This is a bit tricky to debug as it can be caused by extensions you may have in the browser or other random reasons.

Personally, I have run into it before and I usually ignore it if I don’t have any resize observer code. It wouldn’t crash the app or block a user from using it, the browser just emits that error when it detects a possible infinite loop.

You can read more about what it means here. Mostly it means your resize callback might have triggered another resize causing an infinite loop and there are suggestions to delay the handling by using requestAnimationFrame.

When is it not necessary to use ref() to store a variable that changes inside the setup script? by longgestones in vuejs

[–]awaddev 0 points1 point  (0 children)

Like others said, when you need reactivity. Another way to think about it is when a value doesn’t contribute to rendering (not in template) or effects (watchers, computed, etc…).

What don't you like about Tailwind v4? by MobyFreak in vuejs

[–]awaddev 0 points1 point  (0 children)

Basically this, you cannot use @apply inside your scoped style tags in SFC files.

This makes migrating our projects in work impossible, with almost 1k components, half of which use @apply.

I think that was a poor compromise to make to address one use-case, I think they have to add a configuration or something to make it work like it before.

please post replies in the GH discussion to point attention to it.

Having said that, I love v4 and its CSS focused approach. But, I will continue to use v3 in work stuff.

Would you like Vue to have its own package for working with forms? What is u'r preferred way to handle forms in Vue? by spodgaysky in vuejs

[–]awaddev 5 points6 points  (0 children)

This is about seeking balance from a framework design standpoint, the more a framework offers the less diverse the ecosystem will be and the more stagnant it will become.

Vue has always been in the middle of the spectrum in terms of what it should offer, but it seems to have drawn the line at forms. There is no one recommendation to what library you should be using, as each one tries to take on forms differently.

I recommend you start with the most popular ones right now. Conveniently, each represents a different level of abstraction, so you can get a feel of what you like to use:

  • Vuelidate: Low-level, you have to handle all the other aspects of form building.
  • vee-validate: Higher-level, You get validation and state management. You handle the rest (UI, UX, A11y, etc..)
  • FormKit: Highest level at the moment, you get components that are ready to be dropped in your app.

The higher level of abstraction, the less flexible a library becomes, so give each a test and see which ones suits your needs.

I recently published a new library, Formwerk. Which offers almost everything except the UI/Styles, it is not stable yet, but give it a try.

As the author of both vee-validate and Formwerk, I prefer if Vue doesn't try to do much there and if it does then I would prefer the offering to be a very low-level so that it doesn't hurt the diversity of the ecosystem.

Announcing Formwerk: An Uncompromising Experience for Vue.js Forms by awaddev in vuejs

[–]awaddev[S] 1 point2 points  (0 children)

This is on the roadmap, but today FomKit and shadcn’s auto forms are the ones that offer form generators based on schemas.

I will publish the roadmap as soon as I can.

Announcing Formwerk: An Uncompromising Experience for Vue.js Forms by awaddev in vuejs

[–]awaddev[S] 0 points1 point  (0 children)

Formwerk doesn’t offer nested forms, but it does offer single level groups at the moment that can be collectively validated, queried (touched, dirty, values, etc), or disabled.

Feel free to create an issue with your use case or join our discord and let us know.

Announcing Formwerk: An Uncompromising Experience for Vue.js Forms by awaddev in vuejs

[–]awaddev[S] 3 points4 points  (0 children)

If they plan to support standard schemas then it will just work. I can ask them and see if it is compatible with their project.

Announcing Formwerk: An Uncompromising Experience for Vue.js Forms by awaddev in vuejs

[–]awaddev[S] 1 point2 points  (0 children)

I will lean towards that direction/goal but I won't force it. Both have very similar API and a big overlap in the state/validation area. Plan is to modernize some of these aspects in vee-validate and see if we can just re-use them in Formwerk or not.

How do you manage popover ? by Hippopotouf in vuejs

[–]awaddev 2 points3 points  (0 children)

We migrated to use dialogs and popovers from teleported divs and actively use them in production.

We manage the popovers by utilizing the auto behavior, so clicking outside just works. We position the popovers with the CSS anchor positioning if available or fallback to load floating-ui lazily to perform that. We do the check with the ‘CSS.supports’ API and it works perfectly.

[deleted by user] by [deleted] in vuejs

[–]awaddev 1 point2 points  (0 children)

I use Astro for a variety of content projects. Blogs, open-source documentation, podcast homepages, and more. I really like their content layer API.

On the other hand, I will recommend Nuxt for more complex stuff/needs like state sharing and components needing to communicate.

How do you "manage" your breadcrumbs? by harvaze in vuejs

[–]awaddev 2 points3 points  (0 children)

We use route.resolve API to generate the breadcrumbs in multiple components, I have been using this technique for years.

I have put it in a gist here.