loading...
Cover image for Top problems I got switching to Vue 3

Top problems I got switching to Vue 3

ghalex profile image Alexandru Ghiura Originally published at ghalex.com ・Updated on ・3 min read

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" />
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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"
/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The syntax looks like this: (image from Vue 3 documentation)

Alt Text

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) }}
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

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!

Discussion

pic
Editor guide
Collapse
stefanovualto profile image
stefanovualto

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:

  • computed
  • method
  • pipe or compose functions (could be used in previous version in case)
// computed
{{reversedUppercaseMsg}}

// method
{{reversedUppercase(msg)}}

// pipe (uppercase first)
{{ pipe(uppercase,reverse)(msg) }}
// compose (uppercase first)
{{ compose(reverse, uppercase)(msg) }}
Enter fullscreen mode Exit fullscreen mode
Collapse
ghalex profile image
Alexandru Ghiura Author

Personally, I prefer the computed alternative.

Collapse
jsn1nj4 profile image
JSn1nj4β€β€πŸ‘¨β€πŸ’»

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.

Collapse
yellow1912 profile image
yellow1912

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.

Collapse
ghalex profile image
Alexandru Ghiura Author

I think you are right, in 6-12 months, there will be more components supporting Vue 3.

Collapse
oggo profile image
oggo

It sounds funny, that your point 3 is crucial for v3 :-D