Bug: IDE Auto Import/Quick Fix Not Working for Vue Package Component in Template

[incutonez]

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

1.93.1

Vue version

3.5.8

TypeScript version

5.6.2

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 17.34 GB / 31.85 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

package.json dependencies

{
    "@incutonez/my-package": "^0.0.4",
    "vue": "^3.5.8"
}

Steps to reproduce

1. Clone my repo
2. cd repo && npm i
3. Goto App.vue
4. Remove the imports
5. Use the quick fix menu "ctrl+." to import TestValue successfully
6. Try to use the quick fix menu to import ComponentA in the template, but see that it's not possible
7. Manually start typing out the import for ComponentA in the script and see that the IDE allows you to auto-complete

What is expected?

I should be able to see my component's name in the quick fix menu. Maybe my custom package is set up incorrectly, but this seems like a tooling issue.

What is actually happening?

I can't see my component in the quick fix menu.

Link to minimal reproduction

https://github.com/incutonez/ide-import-issue

Any additional comments?

Here's a recording of what I'm talking about. I've also tried to import in IntelliJ, and I get the same issue that VSCode has.

https://github.com/user-attachments/assets/da85e54e-093d-4952-bf91-b9cacbbd3f08

[KazariEX]

Please refer to #2304.

If you want to get warning on unimported components, you can try enabling vueCompilerOptions.strictTemplates in tsconfig.json.

[incutonez]

If you want to get warning on unimported components, you can try enabling vueCompilerOptions.strictTemplates in tsconfig.json.

I tried this, and while the quick fix still doesn't work, I do get a red squiggle error, which I have been wanting for a long time (image below). Did not realize that vueCompilerOptions was becoming a thing in tsconfig.json. Thank you for pointing that out!

[KazariEX]

In theory, you should be able to use the tab completion to achieve the same fix effect.

[incutonez]

In theory, you should be able to use the tab completion to achieve the same fix effect.

Oh, that's interesting... that does work in VSCode, however, it doesn't work in IntelliJ. Still, ctrl+. doesn't work, even after tab completing. Really bizarre.

[victorgarciaesgi]

What's blocking me to use strictTemplates is that it reports error for extra attributes, like putting a data-xattribute on a div, I don't know why this setting isn't splitted into 2 options (imports and props)

[huanglong6828]

+1

[teziovsky]

I completely agree with this issue! I’m experiencing the same behavior, and it’s really frustrating to have to manually type the component name, then use TAB for autocomplete and import it. It would be much more efficient if we could simply paste the component and have it auto-imported, or paste the component into code and then use Ctrl + . to select the import. This change would significantly improve our workflow!

[MatijaKocevar]

Any update on this issue? I am having the same problems and it's driving me insane...

[johnsoncodehk]

Thanks for the report, but @incutonez/my-package package doesn't seem to exist on npm, could you update the repro case?

[ElMexicanitox3]

hii guys, i´m having the same problem, any update on this issue???

[ivanmem]

@johnsoncodehk you can use my library as a repro source. https://github.com/ivanmem/vue-vkontakte-icons

[baixiaoyu2997]

Please refer to #2304.

If you want to get warning on unimported components, you can try enabling vueCompilerOptions.strictTemplates in tsconfig.json.

or use vue/no-undef-components rule of eslint, but still not help for import

[KazariEX]

Let's track #5457.

[c01nd01r]

@KazariEX hey 🖖
Issue #5457 was marked as completed, and now we’re able to use Quick Fix Import in templates (many thanks to all the contributors 🙏).
However, #5457 still doesn’t work with component imports, which was the original concern described by the author of this issue. I believe closing the current issue as complete might be a bit premature?

Having Quick Fix for component imports would be extremely helpful - especially when a component name is already written inside a <template> during development, or when the template is being composed collaboratively with AI using Tab completion.

upd.

Ohhh, turns out it works if strictTemplate is enabled, even without the "vue/no-undef-components" rule in eslint. Thanks again! 🙏 Details: https://github.com/vuejs/language-tools/wiki/Vue-Compiler-Options#stricttemplates