Nuxt•2mo ago

Nuxt V4 typescript auto import composables from app/composables

Hello everyone, since switching to Nuxt 4 with the new folder structure (frontend in app), typescript is showing errors on composables that should normally be auto-imported. The code runs fine, but red lines are displayed. Does anyone know how to fix this? Thanks in advance!

6 Replies

kapa.ai•2mo ago

Hi @Smaug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue is common when switching to Nuxt 4’s new directory structure (app/composables) because TypeScript type declarations for auto-imported composables are generated by Nuxt only when the dev server is running or after running certain Nuxt commands. If you create or move composables without the dev server running, VS Code (and TypeScript) won’t recognize them, resulting in red squiggly lines, even though the app works at runtime. How to fix: 1. Start the Nuxt Dev Server or Run Prepare/Build
Run one of the following commands in your project root:

   npx nuxi prepare
   # or
   npx nuxi dev
   # or
   npx nuxi build

   npx nuxi prepare
   # or
   npx nuxi dev
   # or
   npx nuxi build

This will generate the .nuxt/imports.d.ts file, which provides the necessary type declarations for auto-imported composables. Once this file is generated, VS Code should recognize your composables and the errors should disappear. 2. Check Your Directory Structure
Make sure your composables are in the correct directory: app/composables/. With the new structure, the ~ alias points to app/, so ~/composables resolves to app/composables/ New Directory Structure. 3. Nested Composables
By default, Nuxt only scans the top level of the composables/ directory. If you have composables in nested folders, you need to either re-export them in composables/index.ts or configure the scanner in your nuxt.config.ts:

   export default defineNuxtConfig({
     imports: {
       dirs: [
         '~/composables',
         '~/composables/**'
       ]
     }
   })

   export default defineNuxtConfig({
     imports: {
       dirs: [
         '~/composables',
         '~/composables/**'
       ]
     }
   })

See details and examples. 4. Restart VS Code
Sometimes, after generating the types, you may need to restart VS Code or reload the TypeScript server for the changes to take effect. Summary:
The red lines are due to missing type declarations for auto-imported composables. Running the Nuxt dev server or nuxi prepare will generate the necessary types and resolve the issue in VS Code composables directory usage. If you still have issues after following these steps, ensure your Nuxt version is up to date and that your nuxt.config.ts is correctly set up for the new structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

SmaugOP•2mo ago

My new tsconfig.json:

{
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ]
}

{
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ]
}

But if I run bunx nuxi prepare and bunx nuxi typecheck I have errors on auto-imported components and composables Update: Solved by moving dependencies from devDependencies to dependencies

Numil•2mo ago

Hey, what dependencies did you move around, i'm having the same problem right now Moving everything from devdeps to deps didnt change anything for me, so if anyone has an answer at some point, i'd really love some insights (it shouldn't have changed anything anyway :'))

SmaugOP•2mo ago

Did you try to remove node_modules and .nuxt and reinstall all ? it worked for me

Numil•2mo ago

Yeah, sadly it didnt fix it for me, i'll try other things i guess.... :/

Gaming

Programming

Nuxt V4 typescript auto import composables from app/composables

Did you find this page helpful?