johnsoncodehk
Integrating `volar-service-vetur` in a new Vue 3 + Vite Project
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.jsbut notvolar.config.js. I tried two approaches:- Modifying
vite.config.jsas per thevolar-service-veturdocumentation. - Creating a new
volar.config.jsusing the code from the documentation.
- Modifying
-
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-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!
volar.config.js is no longer supported in Vue-Official v2. Services requiring volar.config.js in this repo can only be used with v1. You need to downgrade your VSCode extension
You need to downgrade your VSCode extension
Is there any info, links or hint on this?