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!