Robby, our Senior Software Engineer and Web Lead, wrote an article for Medium about the change from Vue 2 to Vue 3. If you’ve used class components, read on. 

For anyone using class components in Vue 2 via vue-class-component and vue-property-decorator, the last few years have been…challenging. The first whispers of Vue 3 gave the impression that class components would be even more supported than in Vue 2. But that quickly gave way to the abandonment of the Class API proposal and the birth of the Function-based Component API (which eventually became the Composition API).

At first, everything still seemed fine because surely vue-class-component would still support class components in Vue 3, right? Right? Everything else in the Vue ecosystem was busy migrating to Vue 3, so why would these packages be any different? But then…the maintainers went dark, and more and more time was passing without any updates.

While we were in this state, still hoping for an update or an official release or something from vue-class-component, Vue 2 was officially announced as reaching End of Life on December 31, 2023. Sure, we could keep using it and maybe even pay for Extended Vue 2 LTS from HeroDevs…but one of our engineering values here at Pocket Prep is to be “perpetually modern,” and so sticking with Vue 2 no longer felt like an option we’d be happy with.

So what were we supposed to do? Pocket Prep has three major Vue apps, one smaller Vue app, and a Vue component library. All using class components. Should we bite the bullet and start migrating hundreds of components in multiple apps to the composition API? Or back to the regular options API? Do we totally leave Vue and switch to Angular or React? Do we ditch vue-class-component and write our own class component decorators?

The real answer (spoiler alert) is that we finally found a replacement package to allow our existing class components to continue working in Vue 3: vue-facing-decorator. We dug into it, tested it, and found that it did exactly what we needed.

But vue-facing-decorator still seemed to be missing something: a community. It was brand new, hardly anyone knew it existed, and it hadn’t yet been tested by a wider audience of users. I started mentioning it in various GitHub issues, I posted a question in the Vue discord server, and I just generally started talking about it to anyone who would listen in the Vue community. About a month later, the Vue team added an official deprecation notice to vue-class-component, suggesting vue-facing-decorator instead. At long last, we could feel more confident in a more “official” migration path with vue-facing-decorator that would allow us to continue using our existing class components.

But according to npm, vue-class-component still has hundreds of thousands of weekly downloads, so I’m willing to bet there are others out there asking the same question we were asking: “what do we do with all our Vue class components?” Different solutions will work for different contexts, but so far we’ve found vue-facing-decorator to be working for us. And hopefully, as the vue-class-component community shifts more and more to vue-facing-decorator, the package will become even more robust and even more reliable.