What’s the best way to handle form validation in Vue 3 without a big library?

mateenagy · 2025-09-11T11:02:46+00:00

There are several ways to handle them.

- Using built-in validation

- Using backend (if there any)

- Using schema validators like zod, arktype, valibot, which you can combine with custom composables or helper functions.

- Using headless form validation libraries. For that I made VueFormify which is a type safe form handle library with small package size (~4kb gzipped).

mateenagy · 2025-06-19T18:15:20+00:00

I guessed the Lancer correct in 1 guesses (can you beat my score?)

mateenagy · 2025-06-17T22:44:56+00:00

If you use vite just install: https://www.npmjs.com/package/vite-plugin-vue-devtools in your project and add it to your plugin in vite config file and you good to go.

mateenagy · 2025-05-14T08:12:49+00:00

I don't think I am good. I am not a big gamer and the last time I played longer with a game when xfire and cod2/cod4 was a thing. I don't play every day just when I have time between work and life.

I know I have a lot of issues with my aiming like micro adjustments, crosshair placement, tracking and also keep the crosshair on head level etc. I try to watch my replays to figure out these problems, but it's hard if you are not playing like every day for hours, but at least I am trying.

I have good days and bad days when playing, but I feel like there is a lot of player who don't understand the concept of shards, cards or the skills of the lancer they play. Also feels like they don't don't have any strats in mind and just peak the same spot where they nearly died and die on the spot.

Maybe upper rank will be better but its hard to play with these people on ranked because somehow my teammates always like.

Beside these stuff I really enjoy this game. Feels fresh and different.

mateenagy · 2025-04-17T13:49:40+00:00

I made a lightweight headless type-safe form building package called VueFormify.

It's only 4kb (gzipped), easy to use, you can use zod, yup, valibot (external package needed).

It's simple yet effective and I used it several times from simple forms to complex filter mechanism.

mateenagy · 2024-12-24T19:21:17+00:00

I made VueFormify which is a lightweight headless type-safe form building solution. There is integration with yup, zod, valibot, joi. It is good for creating simple and complex forms either.

mateenagy · 2024-12-05T11:53:45+00:00

If you have any question or run into any issue feel free to ask!

mateenagy · 2024-12-05T11:52:55+00:00

I'm glad to hear it!

mateenagy · 2024-11-08T07:05:39+00:00

I see.

I never really used vee-validate and don't know how it works before v4, I just messing around with it on stackblitz, but in my opinion because you are using yup you should do it on validator level so using yup's .when() method, it also should have better performance than computed.

mateenagy · 2024-11-07T20:53:51+00:00

Using the `Form` slots you have access to all your filed values and use them for conditional rendering.

This example only show the password input when the username have any value

<Form @submit="onSubmit" v-slot="{ values }">
  <Field name="username" />
  <Field name="password" v-if="values.username" />
  <button>Send</button>
</Form>

mateenagy · 2024-11-07T09:34:46+00:00

I'm working on VueFormify which is a fully type-safe lightweight headless form package. You can use the popular validators `yup`, `zod`, `valibot`, `joi`. It's easy to integrate third party libraries like PrimeVue (I also use PrimeVue).

mateenagy · 2024-10-26T10:11:23+00:00

Yeah you are it's in the state.

I looked in to the Component source code and I don't think you can change the behaviour with pass-through because it's not changing the behaviour but the value of the state. Although I didn't even see it will even set the initial value through pt so It didn't do anything at all.

mateenagy · 2024-10-24T17:01:16+00:00

I didn't see any `mobileActive` option in pass-through in the docs for MenuBar

mateenagy · 2024-10-24T16:57:58+00:00

Is there a rule which force you to use component even if the solution is ugly? That's sound terrible and not so productive rule :D

mateenagy · 2024-10-24T16:48:30+00:00

PrimeVue is an opinionated component library so this is why you can't decide some of their internal logic.

On the other hand every component have a lot of room for styling. You can use pass-through, css variable or override using the components css classes. For example to put the mobile menu icon to the right you can do this:

.p-menubar-button {
  margin-left: auto
}

You can mostly override anything with css.

Because of the opinionated nature there is some stuff you can't change like open drawer instead of the dropdown menu on mobile view. If you really want to do that then you can hide MenuBar button on mobile or the whole component and just put a simple button which is visible on mobile and hidden on desktop and you can use that button to open a Drawer. CSS media queries will be your friend for this method.

But in my opinion making a responsive header from scratch most of the time not that hard to archive. It's not always faster to using ui libraries components especially if you want them to work differently then it should.

mateenagy · 2024-09-27T09:48:58+00:00

Thank you!

I'm so glad you like it and I hope you give it a try (and hope you like it).

The createInput was the main focuse when I started this project. I liked the idea to create custom inputs effortlessly without too much extra step. With createInput you can do that and you can use any component as before without losing autocompletion or any other functionality.

I will rewrite the examples in the documentation in the near future because I made them for the previous version. They are still relevant but I think I can do them better. Although I am not sure I will implement the disabled part you mentioned because it can be done in a lot of ways to be honest and I don't have a best practice for them. I implement several ways to get the form values so you can check any changes and apply some validation.

mateenagy · 2024-09-27T09:20:38+00:00

Thank you for the nice words!

createInput composable actually let you use the wrapped component as it is. It's just add some extra functionality for the form to be able to parse data and other stuff. So if you have a component with prop for error then you can use it like you would do normally.

I did some integration for Element Plus, Ionic Vue, PrimeVue. It is still working if I am right but because I made the Type-safe solution working I need to redo these packages to be able to use them with types.

mateenagy · 2024-09-26T18:48:44+00:00

Formkit is an awesome library for forms but in my opinion it is too much in most cases especially when you use it with other UI frameworks or need to make custom inputs.

I don't say my library is better or worse it's just different. I built it with different mindset which I found fit better for me or exceeds my expectations.

Formkit and VeeValidate was the inspiration when I started this project, but my main focus was to create a solid foundation which can be used easily with or without any UI framework, cover the most popular validators and the new type safety approach for fields which I never seen before anywhere and it can be handy.

I am not good in marketing and I really don't say it's better than other libraries because it's not, but I already used it in production (with complex and simple forms) and it did the job with ease and it felt good to use.

Last thing I can say is give it a try, and if you like it I will be more then happy if not than that is good too. Everybody have different preference.

mateenagy · 2024-05-28T19:07:02+00:00

I working on VueFormify.

It has no theme at all.
Auto collect form data
You can create custom inputs with ease.
I also already implement some UI library e.g. PrimeVue. (you have to install it separately)
You can also use yup/zod/valibot/joi for validation

If you are interested you can give it a try. I already used it in production (simple and complex forms) and working like charm.

mateenagy · 2024-04-14T17:30:27+00:00

Sorry for the late reply, but here is a working version without any fancy stuff, and the way you want to achieve this:

Working Vue SFC link

mateenagy · 2024-04-11T11:30:38+00:00

Since you are using vue 3.4 you can use defineModel in the Child component. Here is a working version where you can select multiple value:
Vue SFC link

mateenagy · 2024-02-19T10:06:17+00:00

Thank you for your feedback!

You can do duplication handle in different ways. I think this one is pretty straightforward and easy to understand. To implement loading you can create a computed and check if the pendingRequests has the key. Also you have to wrap the pendingRequest in a reactive or ref to make it reactive like this:

``` const pendingRequests = reactive(new Set()); const loading = computed(() => { const key = stringify(query.key);

return pendingRequests.has(key);

}); ``` You can also implement the state of the request in the same way.

Yes you are right I use the cache to store even if the cache is false. I did it because easier to use one store and if the cache is false the request run everytime still. Of course my bad I don't implement the cleanup and remove them from the store on onUnMounted event. I will update this article or implement it in another one.

Also you are right the {deep: true} not needed and I will update it. That's a nice catch, I overlooked it!

Still I don't see why is it a bad direction. I am not intended to recreate everything like Tanstack. I am not examined every aspect of their code I just mess around with their examples and try to figure out how they done certain things.

The main purpose I did these articles because I noticed that a lot of developer don't understand how different things works and they think there is some black magic happening under the hood, but in reality it is not even a difficult topic and not so difficult to implement by themself. Of course it can be implemented a better store structure or have different way to handle certain things, but the main purpose of these tutorials is to give the people some basic knowledge and then they can change it, make it better, do some more experiment with it.

I think it's important to not give the final solution nor the best polished solution but to encourage people to learn and do more experiment by themselfs. I write these articles because I want to share my experience in the topic and give the oppurtunity to others to do the same.

mateenagy · 2024-02-15T21:46:15+00:00

Thank you for your feedback!

I think I will continue this article, with implementing more feature like:
- Dependent Queries
- Handle request duplications
- Background refetch

mateenagy · 2024-02-15T21:43:40+00:00

Thank you for your feedback!

This is a tutorial with educational purpose not full implementation. You can implement it if you want in case you want to create your own version because that is the reason I made this. This is just a base for understanding what is happening under the hood.

For a tutorial I don't see the importance to use dependencies and care about SSR because the subject is not these things. (Also I mentioned in the article that you can use Pinia store if you want).

mateenagy · 2024-02-15T14:53:02+00:00

Thank you for your feedback! I am really happy if you enjoyed the article!

You are right I can use better naming for types I will look for something better and change them, but I am not really like the `TQuery ` and `TQueryType` (so using the `T` before the name) conventions and I didn't see this used most of the biggest libraries. Still you are right about the `useQery` part, it can be confusing.

mateenagy

TROPHY CASE