Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mratanusarkar opened this issue Jan 5, 2024 · 2 comments
Open

Comments

@mratanusarkar
Copy link

mratanusarkar commented Jan 5, 2024

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!

@kingyue737
Copy link
Contributor

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

@mratanusarkar
Copy link
Author

You need to downgrade your VSCode extension

Is there any info, links or hint on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants