N
Nuxt•2w ago
José Olórtegui

Invalid props not being reported by TypeScript

Hey guys! need some backup over here 👀 I'm new to the vue/nuxt ecosystem, been coding a product on and off for the last 3 months. Now I'm almost finished with the migration of @nuxt/ui from v2 to v3.. but I was not been as easy as I expected. I don't know if this is a thing with vue, nuxt or @nuxt/ui but I'm not getting errors from invalid props. In v2 for example I had this code: 
<template>
      <USelectMenu
        v-model="selected"
        option-attribute="name"
        placeholder="Buscar un alimento..."
        clear-search-on-close
      />
</template>
<template>
      <USelectMenu
        v-model="selected"
        option-attribute="name"
        placeholder="Buscar un alimento..."
        clear-search-on-close
      />
</template>
And in v3 option-attribute is no longer a valid prop.. but I'm not getting any type errors. Also even adding a random prop <USelectMenu sdfjr="asd" :fff="true" works just fine without any error reporting about an unexpected prop or something like that. Is that normal? 🤔 if that's the default, how can I make it more strict? Thanks!
No description
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @José Olórtegui. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It's normal in Vue and Nuxt (including with @nuxt/ui) that invalid or unknown props on components do not trigger TypeScript errors by default, especially when using single-file components (.vue files). TypeScript's type-checking for props is limited by how Vue's template syntax is compiled and how type information is surfaced to the editor. Key points from the knowledge sources: - Nuxt and Vue 3 are fully typed, and you can opt-in to TypeScript for better type safety by using <script setup lang="ts"> or renaming files to .ts or .vue with TypeScript blocks. However, this does not guarantee that all template errors (like invalid props) will be caught automatically by TypeScript alone. The type system is more effective in the <script setup> context than in the template itself, due to how Vue compiles templates and infers types TypeScript Support in Nuxt. - By default, Nuxt does not perform type-checking during development or build for performance reasons. To enable stricter type-checking (including for props), you need to install vue-tsc and run nuxi typecheck, or enable typescript.typeCheck: true in your nuxt.config.ts. This will catch more type errors, but template prop validation is still limited by Vue's current ecosystem Nuxt TypeScript Guide. - Nuxt UI v3 offers improved TypeScript integration, including auto-completion and type inference for component props, but this is most effective in editors with good TypeScript support and when using the latest versions of Nuxt, Vue, and Nuxt UI. Even then, unknown props in templates may not always be flagged as errors unless you run explicit type checks with vue-tsc Nuxt UI TypeScript Integration. What you can do: 1. Enable Type Checking:
Install vue-tsc and run nuxi typecheck to catch more type errors, including some invalid props: 
   npm install --save-dev vue-tsc typescript
   npx nuxi typecheck
   
   npm install --save-dev vue-tsc typescript
   npx nuxi typecheck
Or, in nuxt.config.ts: 
   export default defineNuxtConfig({
     typescript: {
       typeCheck: true
     }
   })
   
   export default defineNuxtConfig({
     typescript: {
       typeCheck: true
     }
   })
2. Use a TypeScript-friendly Editor:
Use VSCode or another editor with strong TypeScript and Vue support to get better auto-completion and inline warnings for props. 3. Check Nuxt UI v3 Docs:
Since many props have changed or been renamed in Nuxt UI v3, always refer to the latest documentation for valid props. For example, the option-attribute prop has been renamed or removed in v3, and using it will have no effect Nuxt UI v3 Migration Guide. Limitations:
Even with all these steps, Vue's template type-checking is not as strict as in some other frameworks. Unknown props may still not always be reported as errors at compile time. This is a known limitation in the Vue ecosystem. Summary:
Yes, it's normal that invalid props are not always reported as errors in Nuxt/Vue templates. For stricter checking, enable type-checking with vue-tsc and use a TypeScript-friendly editor, but be aware that template prop validation is still limited by Vue's current capabilities. If you want even stricter enforcement, you may need to wait for improvements in Vue's type system or use additional linting tools as they become available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@508070572668878848> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?