Nuxt•5d ago

exported utils functions not visible inside <template>

tsconfig.json

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ]
}

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "files": [],
  "references": [
    {
      "path": "./.nuxt/tsconfig.app.json"
    },
    {
      "path": "./.nuxt/tsconfig.server.json"
    },
    {
      "path": "./.nuxt/tsconfig.shared.json"
    },
    {
      "path": "./.nuxt/tsconfig.node.json"
    }
  ]
}

5 Replies

kapa.ai•5d ago

Hi @mavyfaby. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- If your exported utility functions are not visible inside your <template>, there are a few key things to check based on the Nuxt 4 documentation: 1. Location of Utility Functions
- Utility functions you want to auto-import and use in your Vue components (including <template>) should be placed in the utils/ directory at the root of your project (for app usage), or in shared/utils/ if you want them available in both app and server contexts. - Only files directly inside utils/ (not nested subfolders) are auto-imported by default. If your utils are in subfolders, you need to configure imports.dirs in your nuxt.config to include themDocs: utils directory, Docs: shared directory. 2. Auto-import Behavior
- Functions in utils/ are auto-imported and available in your .js, .ts, and .vue files, including directly in your <template> expressions. For example, if you have utils/format.ts:

     // utils/format.ts
     export default function (value: number) {
       return value.toFixed(2)
     }

     // utils/format.ts
     export default function (value: number) {
       return value.toFixed(2)
     }

You can use it in your template as:

     <template>
       <p>{{ format(123.456) }}</p>
     </template>

     <template>
       <p>{{ format(123.456) }}</p>
     </template>

- If you use named exports, the function name is used as-is. If you use a default export, the function is available as the camelCase version of the file name (without extension)Docs: utils usage. 3. TypeScript Configuration
- Your tsconfig.json with project references is correct and recommended for Nuxt 4. This setup ensures that type-checking and auto-imports work as expected for different contextsDocs: tsconfig references. 4. Common Pitfalls
- If you overwrite compilerOptions.paths in your root tsconfig.json, you may break Nuxt's auto-imported aliases, causing functions not to be recognized in templates. Always add custom aliases via the alias property in nuxt.config insteadDocs: tsconfig customization. - Make sure you have run nuxi prepare or started your dev server so that Nuxt generates the necessary type files for your IDE and type-checkerDocs: auto-generated types. Summary:
- Place your utility functions in the root utils/ directory. - Use named or default exports as described. - Do not overwrite compilerOptions.paths in your root tsconfig.json. - Make sure Nuxt has generated its type files. If you have followed these steps and your functions are still not visible in the template, please check for typos in file/function names, and ensure your dev server is running so that auto-imports and types are up to date. If you need to auto-import from subfolders or custom directories, configure the imports section in your nuxt.config accordingly. If you are still experiencing issues, please provide a code example of your utility function and how you are trying to use it in your template. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

mavyfabyOP•5d ago

@kapa.ai it shows Internal server error: parsing /path/to/project/app/layers/app1/.nuxt/tsconfig.app.json failed: Error: ENOENT: no such file or directory, open 'parsing /path/to/project/app/layers/app1/.nuxt/tsconfig.app.json'

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error message:

Internal server error: parsing /path/to/project/app/layers/app1/.nuxt/tsconfig.app.json failed: Error: ENOENT: no such file or directory, open 'parsing /path/to/project/app/layers/app1/.nuxt/tsconfig.app.json'

suggests that Nuxt is trying to find a .nuxt/tsconfig.app.json file inside your layer directory (app/layers/app1), but it does not exist. Key points from the knowledge sources: - Nuxt generates TypeScript configuration files (like .nuxt/tsconfig.app.json) in the root .nuxt directory of your project, not inside each layer directory. Layers should not have their own .nuxt directories or expect Nuxt to generate config files inside them. All type generation and config files are centralized in the main project's .nuxt folder Docs: tsconfig.json. - If you have a tsconfig.json in your layer, it can cause issues, especially if it references non-existent files or expects .nuxt to exist in the layer. The recommendation is not to ship a tsconfig.json in your layer Github Issue: Layer aliases not resolving. - This error can also occur if your project structure or extends configuration causes Nuxt to treat a layer as a root project, which it is not designed to do. Layers should be structured as described in the documentation, and the main project is responsible for generating the .nuxt directory and its contents Docs: Authoring Nuxt Layers. How to resolve: 1. Remove any tsconfig.json files from your layer directories. Only the root project should have a tsconfig.json. 2. Do not expect a .nuxt directory inside your layer. All generated files are in the root project's .nuxt directory. 3. Check your extends configuration in nuxt.config.ts to ensure you are extending layers correctly and not causing Nuxt to treat a layer as a root project. If you follow these steps and structure your project as recommended, this error should be resolved. If you are using a layer from node_modules, also ensure it does not ship with a tsconfig.json at its root, as this can interfere with Nuxt's type resolution Github Issue: Layer aliases not resolving. If the problem persists, please provide more details about your project structure and configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

Gaming

Programming

exported utils functions not visible inside <template>

Did you find this page helpful?