Today I want to share the problems 🤯 I got when I converted my project from Vue 2 to Vue 3.
My top 3 problems switching to Vue 3:
- using v-model on custom components
- using filters in my template
- using external components
1. Using v-model on custom components
In Vue 2 if you wanted to have support for v-model
in your custom component all you had to do is emit an input
event. Let me show you an example, let’s say we have a DatePicker
component:
<DatePicker v-model="date"></DatePicker>
<!-- In Vue2, would be shorthand for:-->
<DatePicker :value="date" @input="date = $event" />
As you can see v-model="date"
is transformed into :value="date" @input="date = $event"
. So as long as you use the value
and emit an input
event in your custom component everything should be fine.
By the way, the date model looks like this:
const date = {
month: 05,
year: 2020
}
Pretty simple, but if you convert to Vue 3 this will not work anymore.
Don’t get me wrong, I like the new way v-model
works. I think is a great improvement, but the above code will not trigger any error and it is kind of hard to debug if you don’t know that v-model
works differently in Vue 3.
You can read more here about why they change it and how to use v-model
, but the short version is that you need to emit the update:[modelName]
event, not an input event, and use modelName
in your custom component, not value
.
Let’s me show you this on the DatePicker component we created above:
<DatePicker v-model="date"></DatePicker>
<!-- would be shorthand for: -->
<DatePicker
:modelValue="date"
@update:modelValue="date = $event"
/>
The advantage here, after you know about this change is that you can use multiple v-model’s:
// two v-model attributes
<DatePicker v-model:month="date.month" v-model:year"date.year"></DatePicker>
The syntax looks like this: (image from Vue 3 documentation)
2. Using filters in my template
In Vue 3 filters are removed! This was not so hard to fix, but going throw all my files 🥵 and change the filters took some time.
The fact that the pipe of the filter conflicts with the Javascript bitwise operator means that expressions with filters are not valid. That’s why the recommendation is using a method instead.
// Vue 2 Syntax
{{ name | firstLetterUp }}
// Vue 3 Alternative
{{ firstLetterUp(name) }}
The drawback of this is that chaining multiple methods is not that elegant as chaining multiple filters.
// Vue 2 Syntax
msg | uppercase | reverse
// Vue 3 Alternative
reverse(uppercase(msg))
3. Using external components, Global API
It is a common practice for most components to register using global API, especially plugins use Vue.use
to register.
The problem here is that as the global API is no longer available in Vue 3 the Vue.use
method will cease to work and make most of the components break.
This can be a big problem if you have lots of external components in your application because you need to wait for the author to support Vue 3.
Me personally, I had to fork some of the components and made the change myself.
Conclusion
These are the top 3 🤕 problems I encountered, I had a few small ones but not important enough to include here.
However, I am curious what were your top problems switching to Vue 3? Please let me know in the comments?
Thank you so much for reading!
If there is anything I can do to help, please reach out. Check out my blog for more articles or follow me on Twitter @ghalex
Have a nice day!
Top comments (7)
As previously said, I will probably wait before using it in production.
But for the point 2, I kind of agree with the loss of elegance.
Where would go your preference through this three alternatives:
Personally, I prefer the computed alternative.
I like the pipe function in place of inline filters. Definitely nicer to read than nested method calls, and definitely still good if I don't really need a computed property.
Thank you for sharing. As much as I'm I'm excited about v3, I don't think I will move on to it after 6-12 months for all the small things to be smooth out.
I think you are right, in 6-12 months, there will be more components supporting Vue 3.
One problem I faced recently was the same event firing multiple times when using (creating) a custom component. Now you have to list events in an array called "emits" similar to how you list props
It sounds funny, that your point 3 is crucial for v3 :-D