Using Cursor AI to Convert a Vue 3 Plugin into a Vue 2 Compatible Version

The author needed a horizontal‑scrollbar plugin for a legacy Vue 2 + webpack project, but the available plugin only supported Vue 3.

Instead of rewriting manually, the author decided to let the Cursor AI tool rewrite the entire codebase.

First, the repository https://github.com/reeswell/vue-horizontal-scrollbar was cloned.

Prompt given to Cursor:

Read the current project, which implements a table‑plugin based on Vue 3 that supports bottom‑floating scrolling. Convert the project to support Vue 2.x, remove Vue 3 dependencies and add the corresponding Vue 2 dependencies, and modify the code accordingly without further prompts.

Cursor responded with a series of modifications, replacing Vue 3 specific packages with Vue 2 equivalents, updating source files, test cases, and documentation. The changes are shown in the following screenshots.

Because the original plugin name remained unchanged, the author asked Cursor to rename it to vue2-horizontal-scrollbar, updating package.json, README.md, and build‑tool identifiers.

The project was built with vite build && tsc --emitDeclarationOnly, producing vue2-horizontal-scrollbar.es.js. When the author tried to use the compiled file, a TypeScript error appeared:

src/index.ts:1:31 - error TS2614: Module '"vue"' has no exported member 'Plugin'. Did you mean to use 'import Plugin from "vue"' instead?

Providing this error and the offending line import type { VueConstructor, Plugin } from 'vue' to Cursor resulted in a corrected import statement and other compatibility adjustments, as illustrated in the screenshots.

Next, the author attempted to publish the package to npm but received the authentication error npm ERR! code ENEEDAUTH. After prompting Cursor, it explained that the machine was not logged in to the registry and supplied the exact npm adduser steps to authenticate.

After publishing, using the plugin in the legacy project triggered a webpack loader error ("Unexpected token ... need appropriate loader"). The error snippet was fed to Cursor, which diagnosed the missing loader for modern JavaScript syntax and modified the webpack configuration accordingly, fixing the build.

The author then asked Cursor to add a CDN usage example to the README. Cursor inserted a code block showing how to include the plugin via a CDN script tag.

Finally, a new requirement was introduced: allow passing a component’s ref directly instead of specifying target‑selector and content‑selector. Cursor updated the component API, added the ref prop handling, and provided usage examples, again documented with screenshots.

In summary, the Vibe Coding session required only a handful of precise prompts. Cursor quickly handled dependency migration, code refactoring, documentation updates, build fixes, npm publishing, and feature extension, demonstrating that AI tools can accelerate development while programmers still guide the process.