Weekly Vue.js News - #42 - Create custom v-model modifier
This week's Vue tip is about creating custom v-model modifiers.
Additionally, I published my first eBook called "27 helpful tips for Vue developers".
I hope you will enjoy this weeks’ issue and if you have any feedback, please get in touch with me on Twitter - @mokkapps or via email: firstname.lastname@example.org.
Have a great week ☀️
Vue Tip: Create custom v-model modifier
v-model has some built-in modifiers like .lazy, .number and .trim. But in some cases, you might need to add your own custom modifier.
In this simple demo, I want to create a custom modifier called no-underscore that removes all underscores _ from an input:
Inside our component we can access the modifier via the modelModifiers prop. We manipulate the value if an input event is fired and the modifier is available:
If your v-model binding includes both modifiers and argument then the generated prop name will be arg + "Modifiers":
An interactive playground for the custom v-model modifier
Generically Typed Vue Components with Composition API — logaretm.com
Abdelrahman provides an interesting take on generic type Vue.js components.
Web Development Articles & Tweets
👉 How it all started with Backbone.js and evolved to Remix, NextJS, and NestJS.
How Removing Staging Environments Can Improve Your Deployments — www.infoq.com
👉 Pre-live environments are never at parity with production
👉 Only merge code that is ready to go live
👉 A flat branching strategy
👉 Feature flagging for high-risk changes
Why I don't miss React: a story about using the platform — www.jackfranklin.co.uk
👉 Jack went from using React every day to not using it at all.
👉 He had a more pleasant time than he was expecting.
Changing Tires at 100mph: A Guide to Zero Downtime Migrations
👉 Create new empty table
👉 Write to old & new table
👉 Copy in chunks from old to new
👉 Validate consistency
👉 Switch reads to new
👉 Stop writes to old
👉 Cleanup old table
Quote of the week
Tools & Misc
🛠️ Pyscript: Run Python in Your HTML — pyscript.net
👉 A framework for creating Python apps in the browser by way of HTML.
👉 Based on WebAssembly.
A website that let's you view the source of any website on your phone.