Use Cursor to upgrade a 5-year-old Vue 2 project to Vue 3.

Feedback
1

Background

Under the praise of many experts, I decided to use cursor and test the boundaries of its capabilities.
Project: A 5-year project.
Technology stack: vue^2 + element-ui^2 + ant-design-vue^1 + vue-cli + vuex.
Having passed through the hands of many people, the code lacks a stable specification. The product design has been continuously iterated according to market changes, and the functions are in a stacking stage without a technical plan.

Objectives

  • Upgrade from Vue 2 to Vue 3.
  • Upgrade the UI library to the latest stable version.
  • Upgrade the relevant dependencies to the latest stable version.

Results First

Failed
After 6 hours of attempts and exhausting the 2000 free quota of cursor, the upgrade was not completed.

  1. Due to the syntax differences between Vue 3 and Vue 2, the AI could not fully traverse and modify 396 files and folders.
  2. Because of the syntax differences between Vuex and Pinia 2, it is already impossible for humans to have an overall view of the code, and the AI is even less able to upgrade the code.
  3. For the upgrade of the UI library, it completely relies on the error code prompts. This process requires continuous human intervention, and the AI cannot complete the upgrade.
  4. Upgrading from Vue-cli to Vite requires manual intervention in the code, and the AI cannot recognize the proxy configuration code in classes yet.
  5. During the process of upgrading the dependent packages, there are requirements for the Node version, which is an environmental issue that can be solved by humans.

Feelings

  1. cursor is really great, completely beyond my imagination.
  2. Its semantic understanding far exceeds the understanding of instructions between people. Just with an instruction like upgrade from Vue 2 to Vue 3, it will start analyzing the code and upgrade the code in the identifiable files.
  3. When the same instruction is given multiple times, it can provide new instruction prompts. For example, for the code instruction of traversing files I gave, when I thought the AI still hadn’t fully traversed, the AI provided another instruction prompt for traversing files.
  4. Just with the error code prompts, the AI can solve the errors on its own.
  5. It is efficient, accurate, and fast.

Tips:Written in Chinese and translated by AI. Please understand if there are semantic differences.

5 Likes
2

Still amazing! After half year working together with cursor, I still got no confidence in rebuilding anything. :joy: Unless LLMs become better at understanding codes at any length.

3

Thank you for the detailed review

4

Due to the syntax differences between Vue 3 and Vue 2, the AI could not fully traverse and modify 396 files and folders.

Uhh, did you try it in one prompt? Syntax differences shouldn’t matter. It should be able to traverse them iteratively (you just need to tell it to keep going every 25th time)

A suggestion is to use: @vue/compat - npm that gives you detailed errors, kinda like a built-in migration guide at compile-time. Cursor’s agent is able to iteratively read these, fix them, and repeat.

Because of the syntax differences between Vuex and Pinia 2, it is already impossible for humans to have an overall view of the code, and the AI is even less able to upgrade the code.

Do one thing at the time. Worry about Pinia after you see the light of your application in vue3.

Upgrading from Vue-cli to Vite requires manual intervention in the code, and the AI cannot recognize the proxy configuration code in classes yet.

What? Why? When I did it, Cursor Agent did this pretty seamlessly. The only issue was that some outputs were very large and I had to stop the manually, but from there it took care of things one step at the time. If you set up so that cursor gets access to console logs in your browser, it can iteratively fix your code one issue at the time. Took about 30 minutes for me.

For the upgrade of the UI library, it completely relies on the error code prompts. This process requires continuous human intervention, and the AI cannot complete the upgrade.

UI component migration is the bulk of the difficulty of migrating vue2 to vue3. To make Cursor properly set up to help you do this, you have to provide structured documentation for it. Your UI framework should have a migration guide you provide cursor.

During the process of upgrading the dependent packages, there are requirements for the Node version, which is an environmental issue that can be solved by humans.

Uhh a bit strange point and conclusion. Yes, it can be solved by humans, but also by agents. Just use agent mode ask it to install a node version or use nvm.

My tips for vue2 → vue3

  1. Upgrade to Vue 2…7 first. Once you’re there you have backported tooling (volar) composition API, and better typescript support.
  2. Move from vue-cli to vite using @vitejs/plugin-vue2. Here you’ll face challenges such as env variables, deprecated apis such as require(), service workers, SASS/SCSS compiling…, etc.
  3. Migrate all your components to composition API. Here you can use a automated agentic tooling. I’m currently in the process of publishing a tool that allows you to do this. I’ll post when its ready
  4. Wrap all your UI-library components in your own wrapper to hide their implementation, so the files you need to change when migrating isn’t overwhelming
  5. Now upgrade to vue3 with @vue/compat, run cursor iteratively to read the errors, fix them, read errors, fix them
  6. Upgrade your UI library version, give cursor the migration-guide in the context and change each wrapper component you made earlier
  7. ???
  8. Profit
1 Like
5

I’m really surprised and honored that you could provide such a detailed answer.

I used Cursor more to find out how “intelligent” it is and how many surprises it could bring under very flexible commands.

So I found a project that has been accumulated over many years and tried the complex scenario of upgrading it.

Further Thoughts

After writing this summary, I also did some thinking and came to many conclusions that are the same as yours.

First of all, the upgrade should be carried out in a planned and step-by-step manner. What should be upgraded in the first step and what in the second step…

Then, solve the errors one by one according to those that occur during each step of the upgrade process.

Finally, complete the full upgrade of the entire project.

Of course, there is also an immature idea, which is to introduce micro frontends, gradually complete the upgrade of each module according to the product requirements, and finally complete the upgrade of the entire project.

Problems

  1. It’s true that in this project, it’s impossible to fully identify the traversal of files. Even though I manually specified src/*/*.vue src/*/*/*.vue···, some files were still missed. Later, I used @file to specify the files.

  2. After specifying the files several times, Cursor still smartly gave a prompt similar to find src -type f -exec grep -l "moment" {} \;.

  3. There are various import methods like cmd\amd, and all the developers who worked on this have left the company. The code has become a black box. One error triggers another, and I can’t locate the errors.

The fundamental reason might still be the irregularity of the project itself. The mutual references are already in a mess, resulting in difficulties in upgrading.

Benefits

Yes, when we do anything, we should consider the benefits of it.

I think for teams or individuals, it’s about how to keep up with the development trend of AI and how to integrate AI into practical applications.

There is a famous saying in China: True knowledge comes from practice. Without investigation, there is no right to speak.

I didn’t have too high expectations for the upgrade project itself. It was more about practice.

Have a nice day!

Tips:

Currently, as a product manager, I think I should pay more attention to how to describe requirements in a set of natural language, which can generate prototype diagrams and at the same time, generate front-end code.

1 Like
6

Inspired by the post of yours, I decided to post how I transformed all my vue (class decorated) files to compositon API files: How I built my own Sonnet-Deepseek fusion agent and run parallel tasks to convert a 5 year old vue2 project to vue3 in 30 minutes

I will share the repo on how exactly I did it if you’re interested.

Right now you still need a bit of experience with it to use Cursor effectively. For example you say that cursor couldn’t find all .vue files, I think immediately that you could’ve had it write a python script that creates a text document with all your .vue files, and then have your migration tool pick these files.

I’m considering making a repo for allowing developers to convert from vue2 to vue3 every step of the way with just a couple prompts

3 Likes