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
-
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.
-
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!
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-veturfollowing the instructions on volar-service-vetur.Challenges Encountered
Configuration File Confusion: The new project setup includes
vite.config.jsbut notvolar.config.js. I tried two approaches:vite.config.jsas per thevolar-service-veturdocumentation.volar.config.jsusing the code from the documentation.Module Syntax Issue: My IDE raised issues with the
require()syntax involar.config.js, as it's CommonJS syntax. I attempted to convert this to ES module syntax usingimport/export, but without success.Request for Assistance
Could someone guide me on how to successfully integrate
volar-service-veturinto 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!