Bug: Auto import from vue adds separate import statements in .vue files

[ddenev]

Vue - Official extension or vue-tsc version

2.1.2

VSCode version

1.92.2

Vue version

3.4.38

TypeScript version

5.5.4

System Info

No response

Steps to reproduce

This happens only in .vue files, works ok in .js files.

Every time I use auto import from 'vue', the symbol I select is imported in a separate import statement (separate line), resulting in multiple import { ... } from 'vue' statements.

Note: I already reported this issue to VSCode devs (microsoft/vscode#227042) but they said it's Vue related and should be reported here.

VSCode Extensions (19)

Extension	Author (truncated)	Version
project-manager	ale	12.8.0
npm-intellisense	chr	1.4.5
path-intellisense	chr	2.9.0
js-codeformer	cms	2.6.1
vscode-eslint	dba	3.0.10
gitlens	eam	15.3.1
EditorConfig	Edi	0.16.4
prettier-vscode	esb	11.0.0
html-slim-scss-css-class-completion	gen	1.7.8
JavaScriptSnippetsStandard	jms	1.8.0
remote-ssh	ms-	0.113.1
remote-ssh-edit	ms-	0.86.0
remote-explorer	ms-	0.4.3
abracadabra	nic	9.4.6
material-icon-theme	PKi	5.10.0
vscode-yaml	red	1.15.0
volar	Vue	2.1.2
vscode-todo-highlight	way	1.0.5
material-theme	zhu	3.17.2

What is expected?

Expected result is to reuse the 1st import statement and add the symbol there.

What is actually happening?

Here is the state before I auto-import the second symbol from vue:

And here is what happens immediately after I hit Enter on the computed symbol:

Link to minimal reproduction

No response

Any additional comments?

No response

[davidmatter]

Can't reproduce. Please try to reproduce this with an empty vscode profile (no extensions). If you can still reproduce, let me know. Otherwise, enable one extension after the other in the empty profile to find out if this issue is caused by a thirdparty extension. Thanks

[svenit]

I have same issues with auto import in Nuxt

[tobychidi]

There seems to be a regression. Nuxt auto-imports are not working in 2.1x

[davidmatter]

Who wants to open an issue with nuxt? :)

[ddenev]

Can't reproduce. Please try to reproduce this with an empty vscode profile (no extensions). If you can still reproduce, let me know. Otherwise, enable one extension after the other in the empty profile to find out if this issue is caused by a thirdparty extension. Thanks

I have disabled all extensions, except Volar (so that it can autocomplete in a .vue file) and the problem is still happening.
Interesting thing is - every time I restarted an extension after disabling it, auto-import worked properly only the 1st time but when I Ctrl-Z and try to do it again, it was still adding a separate import line.

Here is how to reproduce it (this is my setup):

1. Install Quasar: yarn global add @quasar/cli (use yarn v1.x)
2. Create a new Quasar project: yarn create quasar (accept all defaults)
3. Open the new project folder in VSCode (only Volar extension is enabled)
4. Create a new .vue file in src
5. Try to reproduce the above behaviour

The result is:

<template>
  <div>A</div>
</template>

<script setup>
import { computed } from 'vue'
import { ref } from 'vue'

const t1 = ref()
const t2 = computed
</script>

<style lang="scss" scoped></style>

[ddenev]

I just tested with a brand new Vue project (npm create vue@latest) and there is NO problem there. It might be related to Quasar somehow. I will be reporting this to the Quasar team as well.

[johnsoncodehk]

1. Please show the Vue langauge status of your vscode status bar.

2. Please try creating a new .ts file. Can you reproduce the problem in that .ts file?

[minht11]

Experiencing this as well, this only occurs in .vue files, not seeing any issue in .ts files.

Screen.Recording.2024-08-31.at.19.41.21.mov

Note popup incorrectly shows Hybrid ModeDisabled, even tho workspace option is typeScriptPluginOnly

[johnsoncodehk]

We are no longer actively maintaining LSP-only mode, does enabling hybrid mode resolve the problem?

[minht11]

Which option is that?

Edit: changing it to auto does seem to fix it for duplicate vue imports, though it breaks my monorepo auto imports with different issues.

[johnsoncodehk]

though it breaks my monorepo auto imports with different issues.

Is there an existing issue? If not, can you open a new issue?

[ddenev]

I confirm that switching Hybrid Mode to auto does resolve the issue (mine was previously set to false, possibly since the switch from old Volar).