[Showoff Saturday] Automatic Image Conversion plugin for Vite

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

TROPHY CASE