Javascript is required
Weekly Vue News Logo Weekly Vue News

Document is empty, overwrite this content with #empty slot in <ContentDoc>.

Weekly Vue.js News - #42 - Create custom v-model modifier

Migrated Issue
Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

Hi 👋

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".

Get it now for free!

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: mail@mokkapps.de.

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":

Vue SFC Playground

An interactive playground for the custom v-model modifier

Vue Articles

Generically Typed Vue Components with Composition API Generically Typed Vue Components with Composition APIlogaretm.com

Abdelrahman provides an interesting take on generic type Vue.js components.

Web Development Articles & Tweets

Four Eras of JavaScript Frameworks Four Eras of JavaScript Frameworkswww.pzuraq.com

👉 A brief history of JavaScript frameworks.

👉 How it all started with Backbone.js and evolved to Remix, NextJS, and NestJS.

How Removing Staging Environments Can Improve Your Deployments How Removing Staging Environments Can Improve Your Deploymentswww.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 Why I don't miss React: a story about using the platformwww.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: Run Python in Your HTMLpyscript.net

👉 A framework for creating Python apps in the browser by way of HTML.

👉 Based on WebAssembly.

🛠️ View Source

A website that let's you view the source of any website on your phone.

Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
© 2023 weekly-vue.news. All rights reserved.