Vue 3 has made some slight changes to how Vue components work. The basic syntax for creating Vue components hasn't changed much, but there's a lotof new features for you to take advantage of.
Here's an overview of how components have changedin Vue 3. If you drop Vue 3 into an existing Vue 2 codebase, odds are the first error you'll see is TypeError: Vue is not a constructor.
That's because the Vue global is now no longer a class. Instead of usingnew Vue() to create a new app, you should use Vue.createApp().
And, instead of registeringcomponents globally using Vue.component(), you register components on apps using app.component().
For example, below is a component in Vue 2:. Below is how you would rewrite it for Vue 3:. There are 4 necessary changes:.
Use createApp() instead of new Vue(). Use app.component() instead of Vue.component().
Switch the order of definition, so you define the app before the component. Use mount() instead of $mount().
- The basics still work: you still define props the same way, and you can still $emit() eventsfrom your component.
- The only difference is that you now need to explicitly define what events yourcomponent emits like how you explicitly define a list of props.
- Below is an example of how you can use $emit() with Vue 2:.
Below is how you would change the above example to work with Vue 3. Besides the usual createApp()and app.component() changes, this example also adds a list of events the component emits.