Dropping Vue 2 and Class Component Support in v3.1

[johnsoncodehk]

We're announcing the upcoming removal of Vue 2 and class component support from our packages and VSCode extension.

Timeline

• March 2023: vue-class-component was officially deprecated
• December 2023: Vue 2 reached EOL
• Upcoming 3.0 release: This will be the last version with Vue 2 support
• October 2025 (planned 3.1 release): Vue 2 support will be completely dropped

Reasons for This Change

1. Maintenance Burden: Supporting legacy Vue 2 and class component significantly increases code complexity and maintenance effort
2. Contribution Barrier: The additional compatibility layer makes it harder for new contributors to participate
3. Ecosystem Alignment: The Vue ecosystem has largely moved to Vue 3 and Composition API

What This Means

• After 3.0, we will no longer address Vue 2-related issues in our language tools
• New features will be Vue 3-focused
• The codebase will be simplified to improve maintainability

For Vue 2 Users

If you still need to work with Vue 2 projects:

• You can pin your extension version to 3.0.x
• Critical bug fixes will still be backported to the 3.0.x branch

We encourage all users to migrate to Vue 3 if possible. This change will allow us to focus our efforts on improving the Vue 3 experience and modern features.

Thank you for your understanding and support!

[iulo]

Could you create a legacy version of the vscode extension? Like "Vue Legacy (Official)".
We maintain both Vue2 and Vue3 projects, and using project workspace settings to limit which extension to use will make it easier to use.

[Kasopej]

The current extension code doesn't go away though, does it? So can't you just install the pre-3.1-version .vsix extension bundle manually and disable updates?

exactly.. straightforward solution.. you wanna pin your vue version, so pin your tooling too. I get people wanna get patch fixes, but you can't eat your cake & have it

[mrleblanc101]

@gnpwaritschlager @Kasopej This is absurd, you can't have multiple version of the extension installed at the same time, so you wouldn't get any of the new feature when using Vue 3. Re-publishing the extension as a separate package require almost no effort, but would bring huge benefits for those who needs it

[phil294]

you can build clone v2-Version yourself, change the package.json identifier and build it, and have two versions locally. ideally you'd upload the .vsix file here so others can benefit too.

[mrleblanc101]

@phil294 No thanks, sharing a random zip that we have no idea if someone has tempered with it is a terrible idea... Also, it would make it harder to discover for people facing this problem as they would have to dig into random GitHub issue/discussion and then the extension doesn't sync between devices. They already made a Legacy version for Vue devtools, it really would be nice to have the same for Vue Language tools

[namhtpyn]

@gnpwaritschlager @Kasopej This is absurd, you can't have multiple version of the extension installed at the same time, so you wouldn't get any of the new feature when using Vue 3. Re-publishing the extension as a separate package require almost no effort, but would bring huge benefits for those who needs it

I believe that if you use devcontainer, you can have a list of extensions with specific version defined in your devcontainer.json.

[Glandos]

Thanks for maintaining Vue2 support for so long, and especially in this new version.

I'm also maintainer for a Vue2 app which is very complicated to migrate to Vue3 (it's very big), so we'll definitely need Vue2 support for at least 2 more years.

We are using composition and script setup, but then we'll have to move to Vuetify3 + Vue3 all at once, and that's a very high step.

[abea]

For what it's worth, I upgraded our 600+ component code base in a few months (webpack → Vite, Vuetify, and Vue) a couple of years ago. That was in parallel with continued feature work. It's not a small project, but the component changes are much less than I had expected. The Vue 3 upgrade guide and Vuetify upgrade guide made things pretty clear. The vue 3 linter config (vue3-strongly-recommended) and Vuetify linter config (eslint-plugin-vuetify) took care of most of the little changes automatically (always double-check it) and made the rest easy to see. That's just to say that it's not only worth prioritizing, but might not be the blocker that it seems from the start.

[Kasopej]

Mine wasn't as big but it was easily over 100k loc (including ts/js files too though)
in addition to the great hints from @abea I also benefitted a lot from using the compat build, it's VERY useful, gives you warnings which you can then incrementally fix. Large migrations are usually not completed in one go, so it's a very useful tool released by the vue team. Also consider adding lang=ts to your .vue files.. it'd help you catch errors faster

[towry]

Not good news for Vue2 users.

[vishwanathan3109]

As a vue3 option and composition developer, it may be very useful update for me although i wont use vue2 much, but it may save me some time from thinking the bugs related to the versions

[NotTsunami]

We have a legacy Vue 2 + Vuetify 2 project as well. I was able to migrate it all the way to Vite 6 to at least cover some of the transition, but that's the last version that is compatible with Vuetify 2 due to sass being restricted to 1.32.13. As a note for anyone attempting to use Vite 6 with that configuration needs to add this to their vite.config.js:
css: { preprocessorOptions: { sass: { api: 'legacy' } } },
We are also using Vee-Validate, Vuex and Vue-Router, which would also need to be upgraded to their Vue 3 versions, which is outside of the scope of the mentioned project at this time, so I hope some sort of legacy option can be maintained.

[xieliwei1]

Anyone knows whats the best way of migrating from Vue 2 to Vue 3?

[abea]

The Vue 3 upgrade guide and Vuetify upgrade guide made things pretty clear. The vue 3 linter config (vue3-strongly-recommended) and Vuetify linter config (eslint-plugin-vuetify) took care of most of the little changes automatically (always double-check it) and made the rest easy to see.

[nateainsworth]

For me, and funnily enough, since I wrote in the discussion above, I’ve recently migrated a fairly large project (500+ components), and it took about a week.

The vue-upgrade-tool is a fantastic starting point. After that, the biggest challenges are usually the libraries you’re using: some may have breaking changes, while others (like BootstrapVue) never migrated to Vue 3.

Fortunately, tools to help in this area have come a long way. With Claude Code, Codex, and other workspace-aware CLIs, you can automate a lot of the grunt work. I recommend having them read the official version upgrade docs rather than relying on pretrained knowledge; otherwise, things can go off track. Keep a solid commit trail, because these tools occasionally make odd choices, but if you monitor them and run tasks in parallel across different areas, you can move surprisingly fast.

For example, I ran comparisons between BootstrapVue and BootstrapVueNext, I analysed all the components we were using and then had it write documentation on the changes to those components before implementing them. I did the same with other libraries. What would once have been a huge manual task is now much more manageable. For the larger breaking changes like b-table, which needs a little work, tooltip/popover directives, etc. I just renamed them and wrote my own replacements/wrappers.

Finally, run (vue-compat) in Vue 3 mode so you can catch any missed warnings.

[johnsoncodehk]

From version >= 3.0.8 onwards, you can install @vue/language-server@~3.0.0 for Vue 2 projects and configure it in VSCode settings with vue.server.path, so that the language features in Vue 2 projects are not affected by the extension v3.1 upgrade.

For more details, please refer to: https://github.com/vuejs/language-tools/wiki/Vue-2-Compat-Guides

[NotTsunami]

This is a great solution. Thank you so much for supporting Vue 2!

[fan19900404]

实际尝试了，发现问题，会报错。应为是vue-cli4的 vue2项目，依赖的ts版本很老，是4.5版本.

@vue/language-server就会使用项目中的ts版本，导致 ts.server.protocol不存在， ts.server.protocol.CommandTypes.ProjectInfo就会报错。

[drvn-mr]

Following the guide results in the same error as above comment:

node_modules/@vue/language-server/index.js:39
  projectInfoPromise = sendTsServerRequest('_vue:' + ts.server.protocol.CommandTypes.ProjectInfo, {

TypeError: Cannot read properties of undefined (reading 'CommandTypes')
    at Object.getLanguageService (node_modules/@vue/language-server/index.js:39:91)
    at Immediate.<anonymous> (node_modules/@volar/language-server/lib/features/languageFeatures.js:719:63)
    at process.processImmediate (node:internal/timers:485:21)

This is using "typescript": "^4.9.5"

[johnsoncodehk]

The TS compatibility issue will be resolved by #5691, which will be released in @vue/language-server v3.0.9 and "Vue (Official)" v3.1.1.

[jnoordsij]

Is there any known working configuration for this combined with Yarn PnP? Given that there's no node_modules in such a setup.

[matteoscaramuzza]

Hi! Can you confirm that also vue-facing-decorator (https://github.com/facing-dev/vue-facing-decorator) has been deprecated?
Because upgrading to 3.1.0 breaks my builds.

Thank you!

[KazariEX]

We dropped support for class components, so decorators will also no longer work.

[Glandos]

• Options API is still here and not going anywhere
• Remember Angular 1 -> 2?
• Complaining like this is not constructive here