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:

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

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

Web Development Articles & Tweets

Four Eras of JavaScript Frameworks Four Eras of JavaScript

👉 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

👉 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

👉 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

👉 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 All rights reserved.