5 ms·

For those who use Vue regularly, are there any breaking changes in Vue3? How easy it is to upgrade from Vue2 to Vue3? Can one just upgrade the version in packag

For those who use Vue regularly, are there any breaking changes in Vue3? How easy it is to upgrade from Vue2 to Vue3? Can one just upgrade the version in package.json and start using vue3 for new components?

tqkxzugoaupvwqr 6y ago
Vue 3 introduces breaking changes, e.g. filters and event bus ($emit, $on, $off) are removed as far as I know. The Vue documentation team will release a migration guide when Vue 3 is released.
- hactually 6y ago
  Wait... How did they remove emit? Didn't they just make it an instance level export, like props?
  - fermigier 6y ago
    https://tkacz.pro/vue-js-why-event-bus-is-bad-idea/ https://tkacz.pro/vue-js-why-event-bus-is-bad-idea/ https://dev.to/chenxeed/be-prepared-to-migrate-your-vue-app-to-vue-3-eom https://dev.to/chenxeed/be-prepared-to-migrate-your-vue-app-...
  - culturedsystems 6y ago
    It doesn't look like $emit is removed, just the functions to bind event handlers on a component ($on, $off, $once): https://github.com/vuejs/docs-next/pull/167/files https://github.com/vuejs/docs-next/pull/167/files
    - IgorPartola 6y ago
      Why would they do that? Having an event bus can be incredibly useful.
      - mmis1000 6y ago
        And also incredibly messy, often result in non maintainable code. For one shot small project, this is fine. For a big complex project, If you see they already use this. You are mostly already screwed.
        IgorPartola 6y ago
        So the way I’ve been using it is pretty much for toaster notifications and asynchronous updates that are sent from the server to the client. Any component can subscribe to async updates on the shared bus and it will know when a particular object has been updated and can choose what to do with it. We don’t use the global store for all the objects because we deal with a lot of large page-specific state. Toaster notifications are also really nice this way: a lowly modal can send a top page “an error happened” notification without having to do the plumbing for this through every page and component. I don’t see any of that as an anti pattern.
        mmis1000 6y ago
        And FB suffered from this due to undebuggable double notification bug because it could be really hard to debug when any component can send any event to other without any restriction. They eventually moved to flux pattern due to this. That said. It is possible to avoid such situation with strong lint rule. Like you did here. But you can avoid it completely with ~~JUST DON'T~~ . Why should a framework encourage people to do bad things?
        IgorPartola 6y ago
        Um, no. That’s the whole thing is that the components don’t have to know how it is implemented. They do this.$bus.showError(‘Oops’). The bus implementation under the hood sends a message to the top level App component which in turn has the toaster notification implementation. I don’t need a linter to make this work.
        mmis1000 6y ago
  - joshstrange 6y ago
    Another comment says something similar but I'll restate it. `$emit()` is still available on components and parents can still listen for them, this is just removing it from the `Vue` instance so that people don't create global (or scoped) event busses (which thankfully I don't do). You can still do // Child myFunc() { this.$emit('thing-happened', {}); } // Parent <child-component @thing-happened="reactToThing" /> They are even adding the ability for the child to define what types of events they emit (I'm super excited for the autocomplete possibilities for this and how people implement it in TS) and add validation logic to the events they define (like not emitting if the data isn't valid/in the right state). I got REALLY worried/confused when I saw the parent's comment because I was so confused at how to alert the parent of something in the child but it looks like everything is fine. This page sums it all up well: https://v3.vuejs.org/guide/migration/events-api.html#overview https://v3.vuejs.org/guide/migration/events-api.html#overvie...
- tqkxzugoaupvwqr 6y ago
  The migration guide and list of breaking changes is already up: https://v3.vuejs.org/guide/migration/introduction.html#breaking https://v3.vuejs.org/guide/migration/introduction.html#break...
zubairq 6y ago
I tried to upgrade from vue 2 which using the minimized cdn js but couldn’t get it to work. Is there a minimized version of the vue 3 code somewhere that I could try?
- speedgoose 6y ago
  You should minimize it yourself in your build pipeline.
  - zubairq 6y ago
    Ok, I'll wait until they release a minimized version of Vue3 then. Thanks
bynormous 6y ago
It's mostly backward compatible, it depends on how complex your project is and what dependencies you rely on. Simple projects should be fairly straightforward - If you rely on the EventBus install mitt instead, will take you maybe 10 mins to replace. Rewriting your filters so they are plain methods instead should also be straightforward.

tqkxzugoaupvwqr 6y ago

Vue 3 introduces breaking changes, e.g. filters and event bus ($emit, $on, $off) are removed as far as I know. The Vue documentation team will release a migration guide when Vue 3 is released.

hactually 6y ago
Wait... How did they remove emit? Didn't they just make it an instance level export, like props?
- fermigier 6y ago
  https://tkacz.pro/vue-js-why-event-bus-is-bad-idea/ https://tkacz.pro/vue-js-why-event-bus-is-bad-idea/ https://dev.to/chenxeed/be-prepared-to-migrate-your-vue-app-to-vue-3-eom https://dev.to/chenxeed/be-prepared-to-migrate-your-vue-app-...
- culturedsystems 6y ago
  It doesn't look like $emit is removed, just the functions to bind event handlers on a component ($on, $off, $once): https://github.com/vuejs/docs-next/pull/167/files https://github.com/vuejs/docs-next/pull/167/files
  - IgorPartola 6y ago
    Why would they do that? Having an event bus can be incredibly useful.
    - mmis1000 6y ago
      And also incredibly messy, often result in non maintainable code. For one shot small project, this is fine. For a big complex project, If you see they already use this. You are mostly already screwed.
      - IgorPartola 6y ago
        So the way I’ve been using it is pretty much for toaster notifications and asynchronous updates that are sent from the server to the client. Any component can subscribe to async updates on the shared bus and it will know when a particular object has been updated and can choose what to do with it. We don’t use the global store for all the objects because we deal with a lot of large page-specific state. Toaster notifications are also really nice this way: a lowly modal can send a top page “an error happened” notification without having to do the plumbing for this through every page and component. I don’t see any of that as an anti pattern.
        mmis1000 6y ago
        And FB suffered from this due to undebuggable double notification bug because it could be really hard to debug when any component can send any event to other without any restriction. They eventually moved to flux pattern due to this. That said. It is possible to avoid such situation with strong lint rule. Like you did here. But you can avoid it completely with ~~JUST DON'T~~ . Why should a framework encourage people to do bad things?
        IgorPartola 6y ago
        Um, no. That’s the whole thing is that the components don’t have to know how it is implemented. They do this.$bus.showError(‘Oops’). The bus implementation under the hood sends a message to the top level App component which in turn has the toaster notification implementation. I don’t need a linter to make this work.
        mmis1000 6y ago
- joshstrange 6y ago
  Another comment says something similar but I'll restate it. `$emit()` is still available on components and parents can still listen for them, this is just removing it from the `Vue` instance so that people don't create global (or scoped) event busses (which thankfully I don't do). You can still do // Child myFunc() { this.$emit('thing-happened', {}); } // Parent <child-component @thing-happened="reactToThing" /> They are even adding the ability for the child to define what types of events they emit (I'm super excited for the autocomplete possibilities for this and how people implement it in TS) and add validation logic to the events they define (like not emitting if the data isn't valid/in the right state). I got REALLY worried/confused when I saw the parent's comment because I was so confused at how to alert the parent of something in the child but it looks like everything is fine. This page sums it all up well: https://v3.vuejs.org/guide/migration/events-api.html#overview https://v3.vuejs.org/guide/migration/events-api.html#overvie...
tqkxzugoaupvwqr 6y ago
The migration guide and list of breaking changes is already up: https://v3.vuejs.org/guide/migration/introduction.html#breaking https://v3.vuejs.org/guide/migration/introduction.html#break...

zubairq 6y ago

I tried to upgrade from vue 2 which using the minimized cdn js but couldn’t get it to work. Is there a minimized version of the vue 3 code somewhere that I could try?

speedgoose 6y ago
You should minimize it yourself in your build pipeline.
- zubairq 6y ago
  Ok, I'll wait until they release a minimized version of Vue3 then. Thanks

bynormous 6y ago

It's mostly backward compatible, it depends on how complex your project is and what dependencies you rely on. Simple projects should be fairly straightforward - If you rely on the EventBus install mitt instead, will take you maybe 10 mins to replace. Rewriting your filters so they are plain methods instead should also be straightforward.