Types stopped working in <template>

[outer token]

Hi @oak reef. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It sounds like you're experiencing an issue where TypeScript types are not being recognized in your Nuxt <template> sections, even though they work in <script lang="ts" setup>. Based on the knowledge sources, here are some things to check and try:

1. Ensure You Have a Component in components/ Directory
   There is a known issue where type checking in SFC templates does not work if your components/ directory is empty. If you recently deleted all components, try adding a dummy component back and re-running your type checks. This has been reported and resolved for some users by simply ensuring the directory is not empty. Upgrading Nuxt to the latest version may also help if this was the cause in your case [Github Issue: No type check in SFC templates if components directory is empty].

2. Check Your tsconfig.json
   Make sure your tsconfig.json extends from ./.nuxt/tsconfig.json. This is necessary for Nuxt to provide all the auto-generated types and aliases. If you overwrite certain options like compilerOptions.paths, it can break type resolution in templates [Nuxt Docs: Auto-generated Types].

3. Run nuxt dev or nuxt build
   Nuxt generates type files in .nuxt/ during these commands. If you haven't run them after cleaning your project, types may not be available [Nuxt Docs: Auto-generated Types].

4. Editor/Extension Issues
   Sometimes, the problem is with the editor or its extensions. For VS Code, ensure you have Volar installed and that you are using <script lang="ts"> in your SFCs. If you forget lang="ts", TypeScript features won't work in your SFCs [Stack Overflow: Getting intellisense errors when declaring or using TS types/interfaces in Vue.js SFC files].

5. Try Upgrading Nuxt
   If you are not on the latest Nuxt version, consider upgrading, as some type-checking issues have been fixed in recent releases [Github Issue: No type check in SFC templates if components directory is empty].

If after these steps types still do not show up in <template>, the knowledge sources do not provide a more specific solution for your scenario. There may be an editor-specific or environment-specific issue at play. If you are using JetBrains IDEs, note there are known bugs with plugin type resolution that do not affect VS Code [Stack Overflow: Custom plugin in nuxt 3 has unknown type].

If you provide more details (such as your Nuxt version, editor, and a minimal reproduction), it may help narrow down the issue further.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@oak reef Kapa.ai is still learning and improving, please let me know how I did by reacting below.