DEV Community

Be prepared to migrate your Vue app to Vue 3

Albert Mulia Shintra on July 12, 2020

Heya! In this post, I would like to share my recent experience of trying out Vue 3 beta version, specifically regarding some caveats you might wan...

Read full post

ArtOfIntel • Jul 13 '20

Simple and useful, thx.
Where's the link to this "if you love Typescript,.... I'll write a separated article about it ;)" ?

Albert Mulia Shintra • Jul 13 '20

Thanks for checking!

I'll post a new article in a few days, will share it here once I do!

Gábor Soós • Jul 22 '20

Here is some Typescript love until the article :)

Just code examples, but it's more than nothing

ArtOfIntel • Jul 22 '20

Thanks

Albert Mulia Shintra • Jul 27 '20

Fresh from the oven, thanks for asking!

dev.to/chenxeed/consider-vue-compo...

Nonary • Jul 13 '20 • Edited

Using composition API will break Vetur if you’re using the template interpolation feature (where it type checks the html and verifies bound properties exists)

In addition the Vue dev tools will crash significantly more often as it does not officially support the plugin.

So if you rely on that I’d recommend not installing the plugin.

Heena Kwag • Aug 4 '20

Thank you for the great article! It was very useful for me 👍

I would like to ask you for permission to translate this article into Korean and publish it on a company run blog (ui.toast.com/). I will quote the source and in no way use it to gain any monetary value.

Please let me know what you think, and hope you have a great day :)

Albert Mulia Shintra • Aug 5 '20

Hi, feel free to use this article! It's my honour 👍

WORMSS • Jul 13 '20

And if you are using vue-property-decorator?

Albert Mulia Shintra • Jul 13 '20 • Edited

Ah, good concern! I missed to mention it in the article above, that the Vue Class Component is also in the discussion to be available in Vue 3. I think the issue below mentioned some breaking changes to be noted:

github.com/vuejs/vue-class-compone...

WORMSS • Jul 13 '20

Wow, the example given looks really weird with watchers being external. We use vue-property-decorator which would do things like

import { Component, Ref, Watcher, Vue } from 'vue-property-decorator';
import NestedComponent from './NestedComponent';
@Component({ components: { NestedComponent }})
export default class MyClass extends Vue {
  @Ref()
  private someRef?: HTMLInputElement;
  private someData: string;
  private someComputed(): string { return window.localStorage.getItem('foobar') ?? '' }
  @Watcher('someData', { immediate: true })
  private onSomeDataChanged(newValue: string, oldValue?: string) {
    if(this.someRef) { this.someRef.focus(); }
  }
}