Integrating volar-service-vetur in a new Vue 3 + Vite Project

[mratanusarkar]

Background

I recently transitioned from using Vue 2 (generation using: "vue-cli", and using vscode extension: "Vetur") in my projects to the new Vue 3. This new project was set up using the official Vue quick start guide (npm create vue@latest), which generated a Vue 3 + Vite project. The recommended VS Code extension for this setup is Volar.

Issue

I've noticed that Volar lacks several features I frequently used in Vetur, particularly the customizable scaffold snippets (Vetur feature reference). To address this, I attempted to integrate volar-service-vetur following the instructions on volar-service-vetur.

Challenges Encountered

1. Configuration File Confusion: The new project setup includes vite.config.js but not volar.config.js. I tried two approaches:

   • Modifying vite.config.js as per the volar-service-vetur documentation.
   • Creating a new volar.config.js using the code from the documentation.

2. Module Syntax Issue: My IDE raised issues with the require() syntax in volar.config.js, as it's CommonJS syntax. I attempted to convert this to ES module syntax using import/export, but without success.

Request for Assistance

Could someone guide me on how to successfully integrate volar-service-vetur into my Vue 3 + Vite project?
Or if there are other better solutions out there?

A hack would be to temporarily enable Vetur for the features and disable it when done and continue with Volar, but that is inconvenient and I am looking for a permanent dev setup solution.

I'm particularly looking to regain the Vetur base features like customizable scaffold snippets, component data, etc in my current Vue 3 + Vite + Volar project setup.

Any help or pointers would be greatly appreciated!