DEV Community

Cover image for Modernizing Vue App by using IBM Bob
Bervianto Leo Pratama
Bervianto Leo Pratama

Posted on

Modernizing Vue App by using IBM Bob

Background

I have many applications that use Vue CLI and, of course, are mostly still on Vue 2. Vue CLI page also recommends moving the tooling.

Vue CLI Announcement

I know there are a lot of guides on how to migrate Vue CLI to Vite. So, let's ask IBM Bob to help us.

Why migrate?

  1. Vue CLI uses an old Node version, which may pose a risk for us if the old version has any security issues.
  2. The CI may not support the old Node version later, etc....

Plan the Migration

I'll start with a simple application that only lists data. So, I wonder if IBM Bob can tackle it easily without special guidance. I started using this application.

  1. Let's change IBM Bob's mode to Plan. Let's use a simple prompt. I used "Migrate from Vue CLI to Vite".

    Plan mode

  2. IBM Bob will create a Markdown file with the migration strategies. You may need to review and adjust the plan if it doesn't meet your requirements. In this case, I'll use the generated plan. Don't forget to answer the follow-up questions, if any.

    Questions

  3. Here is my sample answer.

    1. Change the script name to follow the convention.
    2. Use vitest
    3. Yes and No, if possible add a simple test case
    4. Yes, change the script to follow up a new wayUpdate the plan and after that move to Agent mode.
    
  4. It generates around 8 tasks. Each task is sufficient for minimal migration. I decided to quickly answer and let IBM Bob move to Agent mode.

  5. The migration process used around 10.49 IBM Bob Coins.

    Coins Usage

  6. I noticed that I forgot to mention using the latest version whenever possible. This left the version not up to date. So, I went back to plan mode to upgrade the dependencies after the migration was finished.

  7. It took around 5.30 Bob Coins. IBM Bob also detected some "Maintenance mode" dependencies, which is good.

    Dependencies

    Dependencies summary

  8. I asked IBM Bob to create the skill based on the first task (the migration process). In addition, I "debugged" visually, as I found some issues that might have been left over (before the migration was done).

  9. Here is the Pull Request.

Lesson Learned

Well, overall is good, even without specifying my requirements and the related migration guides. What about you? Do you think worth doing it manually? Do you think worth using one script? Or... do you think let AI do the job?

Please let me know if you have any further feedback!

GIF

Top comments (0)