Top problems I got switching to Vue 3

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:

1. using v-model on custom components
2. using filters in my template
3. using external components

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)

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))

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.

These are the top 3 🤕 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?