Minimal reproduction for Vue - Official + Astro extension conflict where auto-import suggestions fail in Vue template prop expressions.
npm installNo need to run the dev server — this is a VS Code language server issue.
- Vue - Official (v3.2.5)
- Astro (v2.15.x)
- Open this project in VS Code with both extensions enabled
- Open
src/App.vue - Place cursor inside the
:icon=""prop on the<FontAwesomeIcon>component - Type
faL— no auto-import suggestions appear
Typing faL should suggest icons like faLock, faList, etc. from @fortawesome/free-solid-svg-icons and auto-add the import on selection.
| Context | Example | Auto-import works? |
|---|---|---|
Vue <script setup> |
import { faL█ } |
Yes |
| Vue template open tag | <faL█ |
Yes |
| Vue template prop expression | :icon="faL█" |
No |
| Astro component template | icon={faL█} |
Yes |
The conflict is one-directional: the Astro extension's presence breaks Volar's template prop completions, but Astro's own template completions are unaffected.
Disabling the Astro extension restores auto-import in prop contexts.