Vue 3 breaking changes. She migrated an old Vue.js project and survived

I haven’t been publishing new stories on Medium for a while. Lots of things happened in my life over the last couple of months. I moved to another country, changed my job, and felt lost and disoriented most of the time. Approximately 20% of Ukrainian territories are under Russian occupation, where civilians are being kidnaped, tortured, raped, and killed. My beautiful Kharkiv is being bombed days and nights. Russian missiles strike Ukrainian schools, hospitals, and malls, and you never know who will be next. Nobody is in safety, and that breaks my heart. While abroad, I participated in demonstrations for recognizing Russia as a terrorist state. Those events take part in many European cities; if you support Ukraine and want to join, keep an eye on the hashtag #RussiaIsATerroristState.

Do you use Twitter? I do not tweet a lot, but I love it. News, memes, jokes, and cats — all you need is in one place. After the 24th of February, Twitter became a platform for Ukrainian volunteers and journalists to share the truth about the war with the world. If you can follow one account today, let it be @serhiyprytula, an activist who collected around UAH 600 million to order four Bayraktars in a couple of days.

One day I came up with the idea to replicate a famous Tweet Box on Vue.js. But I was late. Markus Oberlehner did the same four years ago. Besides, he wrote a brilliant article and shared the source code, so I just copied it into my new Vue project. Surprise! It didn’t work. The reason for that was the Vue 3 breaking changes, including v-model. Therefore, I had to do some quick fixes.

Firstly, I changed textareafrom this:

<textarea
  ref=”textarea”
  :class=”`${$options.name}__textarea`”
  :value=”value”
  rows=”1"
  @input=”updateValue”
/>

To this:

<textarea
  ref="textarea"
  :class="`${$options.name}__textarea`"
  :value="modelValue"
  rows="1"
  @input="updateValue"
/>

Method updateValue was transformed from:

updateValue(e) {
  this.textareaGrow();
  this.$emit(`input`, e.target.value);
}

To:

function updateValue(e) {
  textareaGrow();
  this.$emit('update:modelValue', e.target.value);
}

It may seem like a piece of cake, but I was super happy to cope with it. For more information, please, check the documentation.

My migrated application worked, but this didn’t stop me from coding. I rewrote my components with Composition API. That turned out to be more challenging than my previous project with filtering todo items, as I was dealing with props and refs. But after a while, I managed to accomplish it as well. Follow this link, if you want to see my version of Tweet Box on Vue 3. That’s all for now. Stay tuned.