Top problems I got switching to Vue 3
Tags: vue, typescript, javascript
Published: 2020-11-03 18:23:58

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:

```vue
<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:

```javascript
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](https://v3.vuejs.org/guide/migration/v-model.html#overview) 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:

```vue
<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:

```vue
// 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)_

![Alt Text](https://ghalex.com/wp-content/uploads/2020/11/v-bind-instead-of-sync.png)

# 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.

```javascript
// 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.

```javascript
// 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](https://ghalex.com/) for more articles or follow me on Twitter [@ghalex](https://twitter.com/ghalex)

Have a nice day!