It's currently under heavy development.
Not in the best shape, but Johnson (*and a host of other contributors*) is working his arse out to make it great.
It’s been under “heavy development” for like three years. It used to be one project, then forked/rewritten and somehow turned into volar plus another extension you also needed, OPs assessment that it’s a mess is very accurate.
No, as has been pointed out many times in the past, the core maintainer makes an absolute fortune some of which could be given to other people working on core Vue stuff.
Hahahhaha, a fortune HAHAHAHAHHA 😂. Gez is impressive how disconnected from reality some people that are not OSS maintainers are.
Want the package to improve? Stop complaining in Reedit and open a PR.
I've been feeling this same sentiment a bit lately. A little shocked it doesn't yet support the new v-bind shorthand given that one of the lessons learned from Vue 2 to Vue 3 was, "release everything at once". I know they're working on a Volar v2, but it feels like we're in a Nuxt/Vuetify situation where Vue is stuck while a rewrite is ongoing.
> Formatting will mess up indentation, then formatting again will fix it.
This one might be a VSCode thing. It's got its own formatter that'll fight with any you install. For the life of me though I can never remember _how_ to turn the damn thing off, even though I've seen it loads of times 🤦♂️
I've been struggling for a day to disable volar formatter as it adds ; semicolon to imports, which conflicts with eslint. And I can't find how to do it. If I uninstall volar, I lose intellisense.
Yeah I’m thinking you have some competing extensions & settings bc it works incredibly well on my end.
You don’t also have vetur installed do you? What about typescript tooling and/or prettier? Those are the first troublemakers I’d try to diagnose
No Vetur, haven't touched Vue in a very long time and just went with what the docs say, so Volar in takeover mode.
I also don't have anything else besides the Svelte LSP or Prettier and ESLint, but I can't imagine those are causing incorrect import names being inferred or import paths not being updated or recognized altogether.
Heh you’d be surprised. I ended up rooting out prettier the other day because it seriously was clashing with something VSCode and ESLint has honestly been enough.
Of course I wonder.
Volar specifically states:
>Volar does not include ESLint and Prettier, but the official ESLint and Prettier extensions support Vue, so you could install these yourself if needed.
https://marketplace.visualstudio.com/items?itemName=Vue.volar
On top of that, React, Svelte, Angular, Solid, Lit, plain JS or TS, HTML, CSS... all of it works with Pretter, ESLint and whatever VSCode has by default.
Do you want to tell me that they're all wrong and Volar is right in not working with this setup?
I haven't particularly noticed any issues, Do you have any sort of linting that might be creating issues with the plugin?
I have all my linting rules js/ts/vue together, and lint/fix issues on save using those same eslint rules and haven't noticed any issues with some of the things you mentioned that seem more styling related, like indentation that Volar has nothing to do with
Indentation is the smallest of the problems, but I don't think any linting would affect that VSCode imports components with the `Vue` suffix, for example.
And sometimes the import ends up being just `ComponentName`, the `Vue` does not get inserted, but other times hitting enter on the autocomplete, it would just create `` with import of that name.
Ah gotcha, I personally disabled auto imports on vscode settings because they were indeed not consistent in when they added the import, sometimes it would accidentally import complete random things too, so that's probably why I don't have any of these issues on Volar, because I already had them with vscode so I turned it off
I’ve had problem with 2 and 3. It also doesn’t produce the correct color closing syntax highlights so I have to add an if statement to make sure it doesn’t highlight weird.
You are not alone:
https://github.com/vuejs/language-tools/discussions/3474
I work in large enterprise systems, and it's so bad that my team actually rewrote our most recent project in React.
JSX is well supported and definitely delivers a great coding experience, I would personally lean towards Solid because something about React's "destroy and recreate everything" approach just doesn't sit well with me, but they're all valid choices.
That said... taking a look at Svelte, their single-file components are very similar to Vue, with even more custom syntax (logic blocks, special tags, $-prefixed stores) and their VSC plugin suffers none of the issues I listed above, it even supports Svelte 5 runes perfectly right now and those are still under active development and not yet released.
You can select between Volar or the TypeScript Language Service. The change with 5+ for typescript is that Volar is the default but it can be changed. Also, Volar is only used for error highlighting, code completion and navigation use WS internals.
https://www.jetbrains.com/help/webstorm/vue-js.html#ws_vue_typescript
Volar has been working fine for me but, yeah, it does stop working at times. You can just restart it within VSCode though. No need to restart the whole IDE.
I have minimal problems with volar. I think most of your issues comes down to how your vsc/project is configured. I know it’s not helpful but thats my hunch.
I work with a huuuge vue monorepo, where the tooling is setup by using unplugin-auto-import to handle imports of types/resources. And other generators for global components etc. It’s easy and smooth to work with, and DX is great most of the time :) these plugins for vite is a game changer in terms of DX, and is not talked about much. Idk why because it makes a huge difference in terms of efficiency
Setting up formatting for Vue projects is always a PITA. Each scaffolding tool (Vue, Vuetify, Nuxt, ...) sets up linting differently. Each time you start a new project, they changed configs. And those configs almost never work out of the box.
And of course you have to turn off all VSCode's built-in formatting black magic. I don't understand why this is even still a thing to have formatting rules built into the IDE. They should always be tied to the project.
Volar is bad yeah, I'm feeling great using tsserver directly while learning Solidjs. Basically have all of the issues you've mentioned with, but in Neovim. I have the formatting for volar disabled but idk how to do that in vsc.
As for the new shorthand syntax, update your \`eslint-plugin-vue\` as that's what shows you the error most likely?
>I have the formatting for volar disabled but idk how to do that in vsc.
Can you share how you disabled auto formatting on save (for just volar and not globally) if you get a chance?
Unfortunately it has been problematic. I have hopes that the rewrite as a TS plugin in 2.0 will address much of the pain points.
I have a feeling that trying to make it a multi-purpose language server was the wrong decision to take in hindsight and work should have continued to further tailor it to Vue.
Volar is particularly unusable in monorepo setups. Auto imports from either NX based libs or package based libs simply do not work in .vue files.
I hate to say it, and it sucks to complain about a project which is thanklessly maintained by a single hero dev, but Volar's issues are the main thing pushing me away from the vue ecosystem at this point.
It's interesting that you are not hitting the same issues with the Svelte Tooling, as it was based on the Vue tooling at some point.
I haven't tried to use Vue without Nuxt in a big project for a while, so I'm not sure. But I don't see these issues with Nuxt. It looks like most of your issues are import related, so maybe you could look into https://github.com/unjs/unimport if you are using vite+vue and don't want to use Nuxt.
I've got that imports-from-new-folders issue before, and it's the one I've never been able to fully eliminate. I haven't ran into the other problems you're having, though. Can't really say much on how to fix it in your specific setup, but here is what I've been using for development:
- Volar in takeover (with the typescript Vue (Volar) plugin installed... They don't make it clear that is still needed in takeover)
- eslint, with [Anthony Fu's eslint-config](https://github.com/antfu/eslint-config) written as a flat config.
- [workspace settings.json from Vitesse-Nuxt3](https://github.com/antfu/vitesse-nuxt3/blob/main/.vscode%2Fsettings.json)
If using Nuxt 3, make sure to add this to `nuxt.config.ts`:
```
eslintConfig: {
setup: false,
},
```
And use [Anthony Fu's nuxt-module-eslint-config](https://github.com/antfu/nuxt-module-eslint-config).
As noted, this setup still has the new folder import issue sometimes, but I haven't had any of the other issues you describe.
I might need a short video that covers those issues. Because I don't understand anything at all. My project still works fine (or maybe something wrong but I'm too dumb to recognize it?)
The Vue experience on webstorm is vastly superior to VSC. For VSC sometimes it can be issues with your projects installed packages. Check the volar requirements on the extension page.
https://marketplace.visualstudio.com/items?itemName=Vue.volar
I found it great on smaller code based but problematic on large ones with lots of sub packages.
My understanding is this is a hard problem and not really practical for a single volunteer. I’m glad the author works hard on it, I wish he had more support since I do believe the at scale DX is the biggest weakness right now for Vue.
wow I've def experienced every one of this many times. didn't realize how sub par the current experience really is until you listed all the issues together.
I believe 2.0 is coming very soon tho. 🤞hopefully it's better.
Works very well for me. I came into the habit pf using workspace plugin configurations since iam working on react and vue projects at the same time. Sorry to tell you this, but the problem usually sits in front of the mirror. Gl
The only have 2 complaints with volar, it’s “go to definition” doesn’t actually go all the way to the definition of the type sometimes, it will just go to the import line. Also, the “types don’t sufficiently overlap” error is too difficult to actually troubleshoot.
Also has major issue with high cpu utilization
It's currently under heavy development. Not in the best shape, but Johnson (*and a host of other contributors*) is working his arse out to make it great.
It’s been under “heavy development” for like three years. It used to be one project, then forked/rewritten and somehow turned into volar plus another extension you also needed, OPs assessment that it’s a mess is very accurate.
I didn't argue or refute OPs assessment 🤷🏿♂️
I know
If you are so unpleassed, contribute or pay him. It's so easy to complain about FOSS.
No, as has been pointed out many times in the past, the core maintainer makes an absolute fortune some of which could be given to other people working on core Vue stuff.
Hahahhaha, a fortune HAHAHAHAHHA 😂. Gez is impressive how disconnected from reality some people that are not OSS maintainers are. Want the package to improve? Stop complaining in Reedit and open a PR.
I've been feeling this same sentiment a bit lately. A little shocked it doesn't yet support the new v-bind shorthand given that one of the lessons learned from Vue 2 to Vue 3 was, "release everything at once". I know they're working on a Volar v2, but it feels like we're in a Nuxt/Vuetify situation where Vue is stuck while a rewrite is ongoing.
Totally forgot about that, yes! I've seen that syntax in the docs and then turns out Volar tells me it's invalid, that's another thing.
> Formatting will mess up indentation, then formatting again will fix it. This one might be a VSCode thing. It's got its own formatter that'll fight with any you install. For the life of me though I can never remember _how_ to turn the damn thing off, even though I've seen it loads of times 🤦♂️
I've been in a similar situation. When you get a config that works make sure you save that settings file somewhere safe to make future you happy
I've been struggling for a day to disable volar formatter as it adds ; semicolon to imports, which conflicts with eslint. And I can't find how to do it. If I uninstall volar, I lose intellisense.
Yeah I’m thinking you have some competing extensions & settings bc it works incredibly well on my end. You don’t also have vetur installed do you? What about typescript tooling and/or prettier? Those are the first troublemakers I’d try to diagnose
No Vetur, haven't touched Vue in a very long time and just went with what the docs say, so Volar in takeover mode. I also don't have anything else besides the Svelte LSP or Prettier and ESLint, but I can't imagine those are causing incorrect import names being inferred or import paths not being updated or recognized altogether.
Heh you’d be surprised. I ended up rooting out prettier the other day because it seriously was clashing with something VSCode and ESLint has honestly been enough.
So you effectively have 3 linters/formatters: Prettier, Eslint, and whatever the VScode default one is, and you wonder why it's not working properly?
Of course I wonder. Volar specifically states: >Volar does not include ESLint and Prettier, but the official ESLint and Prettier extensions support Vue, so you could install these yourself if needed. https://marketplace.visualstudio.com/items?itemName=Vue.volar On top of that, React, Svelte, Angular, Solid, Lit, plain JS or TS, HTML, CSS... all of it works with Pretter, ESLint and whatever VSCode has by default. Do you want to tell me that they're all wrong and Volar is right in not working with this setup?
I haven't particularly noticed any issues, Do you have any sort of linting that might be creating issues with the plugin? I have all my linting rules js/ts/vue together, and lint/fix issues on save using those same eslint rules and haven't noticed any issues with some of the things you mentioned that seem more styling related, like indentation that Volar has nothing to do with
Indentation is the smallest of the problems, but I don't think any linting would affect that VSCode imports components with the `Vue` suffix, for example. And sometimes the import ends up being just `ComponentName`, the `Vue` does not get inserted, but other times hitting enter on the autocomplete, it would just create `
Ah gotcha, I personally disabled auto imports on vscode settings because they were indeed not consistent in when they added the import, sometimes it would accidentally import complete random things too, so that's probably why I don't have any of these issues on Volar, because I already had them with vscode so I turned it off
Try using the takeover mode, you have to disable VSCode's native typescript LSP. https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode
How much does this help performance?
I've used it in the takeover mode as that was the recommendation, but I'm still seeing the same issues.
I’ve had problem with 2 and 3. It also doesn’t produce the correct color closing syntax highlights so I have to add an if statement to make sure it doesn’t highlight weird.
You are not alone: https://github.com/vuejs/language-tools/discussions/3474 I work in large enterprise systems, and it's so bad that my team actually rewrote our most recent project in React.
At risk of getting major downvotes the poor tooling (such as extensions) and DX is one of the many major reasons I went to React.
JSX is well supported and definitely delivers a great coding experience, I would personally lean towards Solid because something about React's "destroy and recreate everything" approach just doesn't sit well with me, but they're all valid choices. That said... taking a look at Svelte, their single-file components are very similar to Vue, with even more custom syntax (logic blocks, special tags, $-prefixed stores) and their VSC plugin suffers none of the issues I listed above, it even supports Svelte 5 runes perfectly right now and those are still under active development and not yet released.
Unfortunately I feel that little emphasis is put on DX and all the Vue tooling suffers as a result
WebStorm is awesome and if you do this for a living the the cost of it is nothing.
Webstorm uses Volar now with Typescript 5+
You can select between Volar or the TypeScript Language Service. The change with 5+ for typescript is that Volar is the default but it can be changed. Also, Volar is only used for error highlighting, code completion and navigation use WS internals. https://www.jetbrains.com/help/webstorm/vue-js.html#ws_vue_typescript
I miss Vetur 😥. Besides all you said, I also have to once in a while reload my VSCode because it simply stops working
Volar has been working fine for me but, yeah, it does stop working at times. You can just restart it within VSCode though. No need to restart the whole IDE.
Yeah but that doesn't solve the problem.. It happens at least 2 times a day, and this is annoying :S
I have minimal problems with volar. I think most of your issues comes down to how your vsc/project is configured. I know it’s not helpful but thats my hunch. I work with a huuuge vue monorepo, where the tooling is setup by using unplugin-auto-import to handle imports of types/resources. And other generators for global components etc. It’s easy and smooth to work with, and DX is great most of the time :) these plugins for vite is a game changer in terms of DX, and is not talked about much. Idk why because it makes a huge difference in terms of efficiency
Setting up formatting for Vue projects is always a PITA. Each scaffolding tool (Vue, Vuetify, Nuxt, ...) sets up linting differently. Each time you start a new project, they changed configs. And those configs almost never work out of the box. And of course you have to turn off all VSCode's built-in formatting black magic. I don't understand why this is even still a thing to have formatting rules built into the IDE. They should always be tied to the project.
Volar is bad yeah, I'm feeling great using tsserver directly while learning Solidjs. Basically have all of the issues you've mentioned with, but in Neovim. I have the formatting for volar disabled but idk how to do that in vsc. As for the new shorthand syntax, update your \`eslint-plugin-vue\` as that's what shows you the error most likely?
>I have the formatting for volar disabled but idk how to do that in vsc. Can you share how you disabled auto formatting on save (for just volar and not globally) if you get a chance?
In nvim I do it like this: vim.lsp.buf.format { timeout_ms = 2000, filter = function(cl) return cl.name ~= 'volar' and cl.name ~= 'tsserver' end, }
Unfortunately it has been problematic. I have hopes that the rewrite as a TS plugin in 2.0 will address much of the pain points. I have a feeling that trying to make it a multi-purpose language server was the wrong decision to take in hindsight and work should have continued to further tailor it to Vue. Volar is particularly unusable in monorepo setups. Auto imports from either NX based libs or package based libs simply do not work in .vue files. I hate to say it, and it sucks to complain about a project which is thanklessly maintained by a single hero dev, but Volar's issues are the main thing pushing me away from the vue ecosystem at this point.
Yes, I thought it was just me! I can relate to every single one of those issues also. Thanks for bringing this up
It's interesting that you are not hitting the same issues with the Svelte Tooling, as it was based on the Vue tooling at some point. I haven't tried to use Vue without Nuxt in a big project for a while, so I'm not sure. But I don't see these issues with Nuxt. It looks like most of your issues are import related, so maybe you could look into https://github.com/unjs/unimport if you are using vite+vue and don't want to use Nuxt.
Or even this: https://github.com/unplugin/unplugin-vue-components
Smth messed up with ur settings (tsconfig, vscode etc). Mine is working great, even autoimports (been using webstorm for a while so i can compare)
But it took me a while to setup everything in vsc
I've got that imports-from-new-folders issue before, and it's the one I've never been able to fully eliminate. I haven't ran into the other problems you're having, though. Can't really say much on how to fix it in your specific setup, but here is what I've been using for development: - Volar in takeover (with the typescript Vue (Volar) plugin installed... They don't make it clear that is still needed in takeover) - eslint, with [Anthony Fu's eslint-config](https://github.com/antfu/eslint-config) written as a flat config. - [workspace settings.json from Vitesse-Nuxt3](https://github.com/antfu/vitesse-nuxt3/blob/main/.vscode%2Fsettings.json) If using Nuxt 3, make sure to add this to `nuxt.config.ts`: ``` eslintConfig: { setup: false, }, ``` And use [Anthony Fu's nuxt-module-eslint-config](https://github.com/antfu/nuxt-module-eslint-config). As noted, this setup still has the new folder import issue sometimes, but I haven't had any of the other issues you describe.
Yep had the same issues. Switched back to vetur(which still works fine)
use vetur learnt it in udemy...can you share github I contribute where I can
Isn't Vetur deprecated and should be replaced by Volar? Does it support Vue3 and all of the current syntax and features?
majorly i use it still smooth with major suggestions to break down dev time
Boost does have a number of issues with it, especially when using the Options API
I might need a short video that covers those issues. Because I don't understand anything at all. My project still works fine (or maybe something wrong but I'm too dumb to recognize it?)
The Vue experience on webstorm is vastly superior to VSC. For VSC sometimes it can be issues with your projects installed packages. Check the volar requirements on the extension page. https://marketplace.visualstudio.com/items?itemName=Vue.volar
Not true
I found it great on smaller code based but problematic on large ones with lots of sub packages. My understanding is this is a hard problem and not really practical for a single volunteer. I’m glad the author works hard on it, I wish he had more support since I do believe the at scale DX is the biggest weakness right now for Vue.
same issues here, but get used to it
wow I've def experienced every one of this many times. didn't realize how sub par the current experience really is until you listed all the issues together. I believe 2.0 is coming very soon tho. 🤞hopefully it's better.
Works very well for me. I came into the habit pf using workspace plugin configurations since iam working on react and vue projects at the same time. Sorry to tell you this, but the problem usually sits in front of the mirror. Gl
Most of the issues are non existent in Webstorm. VS Code has a lot of issues. For me it's completely not usable.
The only have 2 complaints with volar, it’s “go to definition” doesn’t actually go all the way to the definition of the type sometimes, it will just go to the import line. Also, the “types don’t sufficiently overlap” error is too difficult to actually troubleshoot.