Vue 3.3.0 NEW defineModel Will Change How You Write Vue Code!
29,622
Published 2023-04-10
With Vue 3.3.0 a new experimental macro defineModel was released. Is it better then v-model, let's take a look at how it works!
👉Check out my last video on UnoCSS
   • Is Tailwind CSS No Longer Needed? A L... Â
👉 Join this channel to get access to perks:
youtube.com/channel/UCshZ3rdoCLjDYuTR_RBubzw/join
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech/
👉 Need some help with a project, level up your skills, Vuetify or Nuxt bug? Check out my 1-on-1 mentoring!
mentors.to/erik
Follow me!
twitter.com/erikch
Links:
github.com/vuejs/core/pull/8018
vue-macros.sxzz.moe/macros/define-models.html
0:00 What is defineModel
0:45 How to use defineModel today
01:17 Vue Macros setup with defineModels
03:08 Setting up MyChild with current way of handling v-model components
06:23 Converting to defineMo
All Comments (21)
-
Hey! Want to get a free cheat sheet from me, and I'll let you know when I go live? Sign up here -> bit.ly/3Umk7sW
-
Ooo, this is actually a huge upgrade. I've always found the emit + prop strategy to be a hassle.
-
Thanks Erik ! can you explain Generic Components ( new incoming Feature in v3.3) plz
-
Hey Erik, love your content. FYI, don't know if your aware but this month is the launch of the Vue Official Developer Certifications. Would love to see you cover it on the channel. My company even saw it and was very happy as they want employees to get certified in the technologies we use and gain more experience so I hope this is a big stepping stone in maturity for the framework as many others don't have this.
-
I've been using Vue for 3yrs and I didnt know you could use v-model like that, even though I've used v-model via libraries a million times 😂
-
Thank you. Looks promising.
-
Nice!! Do you have a tutorial of your boiler plate setup after you created the component? vbase 3
-
This is actually really cool. I always thought v-model on components was really cool, but the current way is just weird. Can you make more videos on this kinda stuff?
-
What about drawbacks of using defineModel vs using emitters?
-
it would be great if you upload more videos about new features in version 3.3, like generic components or new methods like toValue
-
3:54 why do you use ref() with a object for your state obj? i think reactive fits that use case more like: const state = reactive({count:0}); also you do not need to use state.source when accessing it within script block. ref() is for primitive values, and for objects reactive() . reactive() does not need use of .value
-
Can we get one way and go with it? This is creating so many inconsistencies in teams. It feels like, while those are there to make it easier, but Vue is getting worse.
-
i know that you might consider it's a "best practice" but can you write your code without typescript?
-
i love your setup. mind sharing the details ? icons set, theme, etc or what do you think makes a setup great or better thank you!!
-
Which theme are you using for vs code?
-
I assume this is a typescript only macro....will this affect the programmers who do Vue 3 with pure javascript?
-
Wow this is amazing feature
-
I never really liked the emit way. This is a great improvement.
-
I like it, don't have to make emit to change modelValue
-
I love that color theme, can you share the name?
